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 & 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 & 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">                                       
</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;
}