...

View Full Version : Navbar not working in IE



Bradski
07-15-2011, 06:10 AM
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

gopinath_3411
07-15-2011, 06:22 AM
where are the images dude.... Cant work with the code unless we have appropriate images.

abduraooft
07-15-2011, 10:39 AM
There are some errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.trusty-travel-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum