CSS Navigation Menu IE Issue

[Moondreamer]

Hello,

I am new to XHTML, I designed a navigation menu using CSS and it looks great in IE 6 and Firefox, but in IE 5 the menu position is off. Thanks in advance for any help!

I'll paste one menu and the CSS below...
<img style="border: 0;" id="logo" src="images/products_01.jpg" alt="" width="396" height="149" /></a>

<div id="nav">
<ul>

<li style="margin-left:15px;">
<a href="index1.html"><font color="#333333">Home</font></a></li>
<li>
<a href="necklaces1.html" onmouseover="dropdownmenu(this, event, menu1, '50px')" onmouseout="delayhidemenu()">
<font color="#333333">Necklaces</font></a></li>
<li> <a href="earrings.html">
<font color="#333333">Earrings</font></a></li>
<li><a href="braceletswatches.html">
<font color="#333333">Bracelets &amp; Watches</font></a></li>
<li style="border:none;">
<a href="rings.html"><font color="#333333">Rings</font></a></li>
<li style="margin-left:15px;">
<a href="clothing.html"><font color="#333333">Clothing</font></a></li>
<li><a href="footwear.html">
<font color="#333333">Footwear</font></a></li>
<li><a href="accessories.html">
<font color="#333333">Accessories</font></a></li>
<li>
<a href="homedecor1.html" onmouseover="dropdownmenu(this, event, menu2, '50px')" onmouseout="delayhidemenu()">
<font color="#333333">Home Decor</font></a></li>
<li style="border:none;">
<a href="contact.html"><font color="#333333">Contact</font></a></li></div>
</ul>
</div>


And the CSS


#header #nav {
width : 44%;
margin : 70px 50px 0 0;
padding : 0;
float : right;
}
#header #nav ul {
margin : 0;
padding : 0;
list-style-type : none;
}
#header #nav ul li {
margin : 0 0 5px 0;
padding : 0 5px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 10px;
font-weight : bold;
color : #0d0d0d;
border-right : 1px solid #000;
float : left;
}
#header #nav ul li a:hover {
text-decoration : underline;
color : #000;
}

Here's the 2nd menu....

<div id="index1-04"> <div id="nav" style="width: 362; height: 57">
<ul>
<li style="margin-left:15px;">
<a href="index1.html"><font color="#333333">Home</font></a></li>
<li>
<a href="necklaces1.html" onmouseover="dropdownmenu(this, event, menu1, '50px')" onmouseout="delayhidemenu()">
<font color="#333333">Necklaces</font></a></li>
<li> <a href="earrings.html">
<font color="#333333">Earrings</font></a></li>
<li><a href="braceletswatches.html">
<font color="#333333">Bracelets &amp; Watches</font></a></li>
<li style="border:none;">
<a href="rings.html"><font color="#333333">Rings</font></a></li>
<li style="margin-left:15px;">
<font color="#333333"></font><a href="clothing.html"><font color="#333333">Clothing</font></a></li>
<li><a href="footwear.html">
<font color="#333333">Footwear</font></a></li>
<li><a href="accessories.html">
<font color="#333333">Accessories</font></a></li>
<li><a href="homedecor1.html" onmouseover="dropdownmenu(this, event, menu2, '50px')" onmouseout="delayhidemenu()">
<font color="#333333">Home Decor</font></a></li>
<li style="border:none;">
<a href="contact.html"><font color="#333333">Contact</font></a></li>
<li style="border:none;">
<font color="#333333">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font>
<a href="http://www.jillssound.com" target="blank"><font color="#333333">www.JillsSound.com</font></a></li>

</ul>
</div>


</div>

And the CSS

#index1-04 {
position:absolute;
left:347px;
top:102px;
width:453px;
height:66px;
background : url('images/index1_04.jpg') no-repeat top right;
}

#index1-04 #nav {
margin : 10px;
width : 100%;
height: 67px;
padding : 0;
}

#index1-04 #nav ul {
padding : 0;
margin : 0px 0px 0px 30px;
list-style-type : none;
}

#index1-04 #nav ul li {
margin : 0 0 5px 0;
padding : 0 5px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 10px;
font-weight : bold;
color : #0d0d0d;
border-right : 1px solid #000;
float : left;
}
#index1-04 #nav ul li a:hover {
text-decoration : underline;
color : #000;
}

 

[conor]

the simple answer is don't fix it.

if it works in ie6, ie7, and firefox then its ok because no one I know still uses ie5. There you go problem solved!

If you still want to fix it then... immediatly from a quick glance of your code I can see one major fault - you use multiple &nbsp; This is not only a bad policy but it could also be the cause of your problems. Instead you can apply one of the following:

margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
or the shorthand: margin:0 0 0 0;

hope that helped

 

[pingeyeg]

I'll have to agree on that one. It is so rare these days that someone is using IE 5. If they are then they are probably using dial-up as well.

 

[jnjc]

Just to throw my two cents in, I agree with the other guys, don't worry about IE5, I reckon a good rule of thumb would be to just support one major release backwards on any browser.

HTH,
JC