IE6 Margin Error

Here is the code in question:


<div id="nav">
    <ul class="menu">
      <li class="current"><a class="abou" href="#">ABOUT US</a></li>
      <li><a class="cour" href="#">COURSES</a></li>
      <li><a class="prod" href="#">PRODUCTIONS</a></li>
      <li><a class="priv" href="#">PRIVATE TUITION</a></li>
      <li><a class="loca" href="#">LOCATION</a></li>
      <li><a class="cont" href="#">CONTACT US</a></li>
    </ul>
  </div> 

In current versions of IE, Firefox, and Safari it shows the 34px of margin-right space I am calling for, but in IE6 it puts in almost double the margin and the menu links end up on 2 lines. Can someone please help me with this???

Here is the css:


#nav {
    background: url(images/nav_bar.png) no-repeat;
    height: 46px;
    width: 900px;
    margin: 20px auto;

}
.menu {
    float: left;
    list-style: none;
    margin-top: 15px;
    margin-left: 20px
}
.menu li {
    float: left;
}
.menu a {
    float: left;
    margin-right: 34px;
    display: block;
    text-indent: -4000px;
    height: 27px;
    width: 96px; 
} 

THANKS

The .menu is falling to the double float margin bug. It happens if a horizontal margin is set as the same direction as the float. Aka left float and left margin. The fix is to add display:inline;

.menu {
    float: left;
    list-style: none;
    margin-top: 15px;
    margin-left: 20px;
[b]display:inline;[/b]
}