Navbar not displaying in IE

Discussion in 'HTML and CSS' started by bradski, Jul 18, 2011.

  1. bradski

    bradski

    Joined:
    Jul 18, 2011
    Messages:
    1
    Hi!

    I'm a bit of a noob to CSS and I'm having some problems - my left hand navbar (a css styled ul) won't display in IE!

    Here's the HTML:

    <div id="menu">

    <ul>
    <li><a href="http://www.trusty-travel-tips.com" class="home"></a></li>
    <li><a class="headerplanning"></a></li>
    <ul>
    <li><a href="http://www.trusty-travel-tips.com/passport.html" class="passports"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/visa.html" class="visas"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/international-travel-health-insurance.html" class="travelinsurance"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/how-to-travel.html" class="howtotravel"></a></li>
    </ul>
    <li><a class="headerpacking"></a></li>
    <ul>
    <li><a href="http://www.trusty-travel-tips.com/travel-packing-tips.html" class="packing"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/travel-packing-checklist.html" class="packingchecklists"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/international-travel-luggage.html" class="luggage"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/travel-accessories.html" class="travelaccessories"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/travel-security.html" class="securityproducts"></a></li>
    </ul>
    <li><a class="headertravelling"></a></li>
    <ul>
    <li><a href="http://www.trusty-travel-tips.com/accommodation.html" class="accommodation"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/transport.html" class="transport"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/air-travel-tips.html" class="airtravel"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/travel-health.html" class="travelhealth"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/travel-safety.html" class="travelsafety"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/about-us.html" class="aboutus"></a></li>
    <li><a href="http://www.trusty-travel-tips.com/Travel-Tips-blog.html" class="blog"></a></li>
    </ul>
    </ul>

    </div>


    ...and here's the CSS:

    #menu {
    list-style: none;
    padding: 0;
    margin: -5px;
    width: 774px;
    height: 210px;
    position: relative;
    }

    #menu a {
    display: block;
    position: absolute;
    outline: none;
    }

    #menu ul ul {
    left:-10px
    }


    #menu .home {
    background-image: url(../image-files/home.jpg);
    width: 180px;
    height: 34px;
    top: 0px;
    }

    #menu .headerplanning {
    background-image: url(../image-files/headerplanning.jpg);
    width: 180px;
    height: 34px;
    top: 32px;
    }

    #menu .passports {
    background-image: url(../image-files/passports.jpg);
    width: 180px;
    height: 34px;
    top: 64px;
    }


    #menu .visas {
    background-image: url(../image-files/visas.jpg);
    width: 180px;
    height: 34px;
    top: 96px;
    }

    #menu .travelinsurance {
    background-image: url(../image-files/travelinsurance.jpg);
    width: 180px;
    height: 34px;
    top: 128px;
    }

    #menu .howtotravel {
    background-image: url(../image-files/howtotravel.jpg);
    width: 180px;
    height: 34px;
    top: 160px;
    }

    #menu .headerpacking {
    background-image: url(../image-files/headerpacking.jpg);
    width: 180px;
    height: 34px;
    top: 192px;
    }

    #menu .packing {
    background-image: url(../image-files/packing.jpg);
    width: 180px;
    height: 34px;
    top: 224px;
    }

    #menu .packingchecklists {
    background-image: url(../image-files/packingchecklists.jpg);
    width: 180px;
    height: 34px;
    top: 256px;
    }

    #menu .luggage {
    background-image: url(../image-files/luggage.jpg);
    width: 180px;
    height: 34px;
    top: 288px;
    }

    #menu .travelaccessories {
    background-image: url(../image-files/travelaccessories.jpg);
    width: 180px;
    height: 34px;
    top: 320px;
    }

    #menu .securityproducts {
    background-image: url(../image-files/securityproducts.jpg);
    width: 180px;
    height: 34px;
    top: 352px;
    }

    #menu .headertravelling {
    background-image: url(../image-files/headertravelling.jpg);
    width: 180px;
    height: 34px;
    top: 384px;
    }

    #menu .accommodation {
    background-image: url(../image-files/accommodation.jpg);
    width: 180px;
    height: 34px;
    top: 410px;
    }

    #menu .transport {
    background-image: url(../image-files/transport.jpg);
    width: 180px;
    height: 34px;
    top: 442px;
    }

    #menu .airtravel {
    background-image: url(../image-files/airtravel.jpg);
    width: 180px;
    height: 34px;
    top: 474px;
    }

    #menu .travelhealth {
    background-image: url(../image-files/travelhealth.jpg);
    width: 180px;
    height: 34px;
    top: 506px;
    }

    #menu .travelsafety {
    background-image: url(../image-files/travelsafety.jpg);
    width: 180px;
    height: 34px;
    top: 538px;
    }

    #menu .aboutus {
    background-image: url(../image-files/aboutus.jpg);
    width: 180px;
    height: 34px;
    top: 538px;
    }

    #menu .blog {
    background-image: url(../image-files/blog.jpg);
    width: 180px;
    height: 34px;
    top: 570px;
    }


    It's very clunky I know but I wanted to have each of the buttons customizable to a different image. I would really appreciate any help anyone can offer me!

    Many thanks! ::D
     
    bradski, Jul 18, 2011
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Elmo Watson

    Repeater with SubRepeater for Navbar

    Elmo Watson, Mar 27, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    481
    Elmo Watson
    Mar 27, 2005
  2. Thomas Mlynarczyk
    Replies:
    10
    Views:
    696
    Thomas Mlynarczyk
    Jan 17, 2004
  3. Paul Furman
    Replies:
    2
    Views:
    530
    Paul Furman
    Feb 17, 2004
  4. Nik Coughin

    navbar 100% height

    Nik Coughin, Jul 9, 2004, in forum: HTML
    Replies:
    5
    Views:
    592
    Nik Coughin
    Jul 14, 2004
  5. chlori
    Replies:
    5
    Views:
    517
    chlori
    Jan 19, 2005
Loading...

Share This Page