Float: Right IE7 Bug

Question

I can't figure out IE7 float right bug! This is killing me. My NAV bar looks great everywhere except IE7. I already created a specific IE7 CSS and have tried various approaches, but still no success. link text

It appears the LI elements are floating outside the #NAV inside the .container.

Anyone of a IE7 fix for FLOAT:RIGHT?

Many thanks.

Here is my code:

.container {
    width: 983px;
    margin: 0 auto;
    background: fuchsia;
}
ul#nav {
    height: 44px;
    margin: 32px auto;
    position: relative;
}
ul#nav li, ul#nav li a {
    display: block;
    height: 44px;
    margin-left: 3px;
    position: relative;
}
ul#nav li {
    padding-left: 0;
    height: 44px;
    position: relative;
    z-index: 10060;
}


<div class="container">
    <ul id="nav">
        <li><a class="navtop_7" href="#"></a></li>
        <li><a class="navtop_6" href="#"></a></li>
        <li><a class="navtop_5" href="#"></a></li>
        <li><a class="navtop_4" href="#"></a></li>
        <li><a class="navtop_3" href="#"></a></li>
        <li><a class="navtop_2" href="#"></a></li>
        <li><a class="navtop_1" href="#"></a></li>
    </ul>
</div>

Answer 1

This jsfiddle.net example displays in IE7 the way I think you want it to, based on your description. (For future reference, supply a reference image you are trying to achieve.)

.container {
    width: 983px;
    margin: 0 auto;
    background: fuchsia;
}
ul#nav {
    height: 44px;
    margin: 32px auto;
}
ul#nav li {
    display: block;
    float: right;
    background: green;
    padding-left: 0;
    width: 140px
    height: 44px;
}
ul#nav li a {
    background: blue;
    display: block;
    height: 44px;
    width: 137px;
    margin-left: 3px;
}