Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navbar not working in IE

    Hi!

    I've just built my first page using HTML and CSS and my navbar doesn't
    seem to be displaying in IE! Can anyone help me with a fix for this??
    I'd really appreciate it!

    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;
    }


    I know this is a pretty clunky way to do things but it was the only
    way I could work out to have a different image for each button!

    Thanks heaps for any help!

    Brad

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    where are the images dude.... Cant work with the code unless we have appropriate images.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    There are some errors in your markup, see http://validator.w3.org/check?verbos...el-tips.com%2F. Try to fix them first.

    btw, the method that you've used to make column layout is not good and that might be the reason why IE behaves like this. I'd recommend you to have a look at http://bonrouge.com/2c-hf-fixed.php to see how to make a good 2 column layout.
    Last edited by abduraooft; 07-15-2011 at 10:43 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •