list won't display properly in IE6

[markosaurus]

I am trying to create a horizontal list for my navigational elements using html and css. This works fine in Firefox, but for some reason renders differently in IE6. This may be to do with my (currently very untidy) coding, or maybe it is a browser bug? Any ideas?

css:

#nav-menu ul {
font-family:Times New Roman, Arial;
font-size:12px;
list-style: none;
padding: 2px;
margin: 0;
position: absolute;
left:312px;
top:94px;
vertical-align:middle;
height: 29px;
display:inline;
}

#nav-menu li {
float: left;
margin: 0 2px;
padding: 0;
text-align: center
}

#nav-menu li a {
background-image:url(../img/btn.jpg);
height: 22px;
line-height: 22px;
float: left;
width: 75px;
display: inline;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align:middle;
}

#nav-menu li a:hover {
background-color:transparent;
height: 22px;
line-height: 22px;
float: left;
width:75px;
display: inline;
color: #036;
text-decoration: none;
text-align: center;
vertical-align:middle;
}

#nav-menu{
width:600px;
height:25px;

}


html:

<div id="nav-menu">
<ul name="navigation">
<li><a href="/xhtml/index.xhtml" target="_self">Home</a></li>
<li><a href="/xhtml/galleryindex.xhtml" target="_self">Gallery</a></li>
<li><a href="/xhtml/contact.xhtml" target="_self">Contact</a></li>
<li><a href="/xhtml/photog.xhtml" target="_self">Photog</a></li>
<li><a href="/xhtml/links.xhtml" target="_self">Links</a></li>
<li><a href="/xhtml/college.xhtml" target="_self">College</a></li>
</ul>
</div>

Sorry about the messiness of the code, but I have been ripping it to bits to try and sort this as fast as possible, it has me stumped now though, I keep confusing myself.

Any help greatly appreciated.

Thx in advance.

http://www.markhankins.co.uk/fostek/test/index.html

 

[jpadie]

stripping out your css and starting with the basics produced this for me.

#nav-menu ul {
font-family:Times New Roman, Arial;
font-size:12px;
}

#nav-menu li {
display:inline;
background-image:url(arrow_right_grey.png);
background-position:left;
background-repeat:no-repeat;
}

#nav-menu li a {
text-decoration: none;
padding-left: 15px;
/* to give the image space to display */
}
#nav-menu li a:hover {
color: #036;
}

 

[Vragabond]

Was this resolved? What was the discrepancy anyway? I cannot see a big difference between IE and Mozilla.

 

[markosaurus]

Yes this was resolved before I went away, sorry for the delay in the reply but I have been out of the country.

I managed to follow your advise, stripped back my code and picked up on a number of small errors which I had made in my haste to get finished before I left (you know what they say:

more haste, less speed

Thanks for the help, and again, sorry about the delay.