Navbar not displaying in IE

[bradski]

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! :

 

[partian]

I'm not too sure if this will help you or fix the issue however, I have this in my HTML at the beginning

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!-- if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->

Since I've had that, my website looks all the same on all browsers.