Menu floating to the right on IE and to the left in FF

Question

I am working on a website that has a menu which behaves correctly on FF but not on IE (as usuall).
On IE it floats to the right while it should float to the left, however if float is set to none it behaves almost correctly, attaching the onto the top of the container. Here's a live example.
Here's the css:

/* Navigation */
.navigation
{
    float: left;
    overflow: hidden;
    width: 650px;
}

.navigation ul
{
    list-style: none;
    margin: 8px 0 0 15px;
    overflow: hidden;
}

.navigation ul li
{
    border-right: 1px solid white;
    float: left;
    padding: 0 12px 0 12px;
}

.navigation ul li.last
{
    border: none;
}

.navigation ul li a
{
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.navigation ul li a:hover
{
    text-decoration: underline;
}

.navigation ul li a.active
{
    font-weight: bold;
}

.btn_login
{
    float: right;
    margin: 4px 4px 0 0;
    display: inline;
    width: 200px;
}

And here's the html:

<div id="navigation_wrap">
            <div class="navigation">
                <ul>
                    <li><a class="active" href="default.asp">Home Page</a></li>
                    <li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
                    <li><a class="" href="products.asp">Packages &amp; Pricing</a></li>
                    <li><a class="" href="gp.asp?gpid=15">test1</a></li>
                    <li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
                </ul>
            </div>
            <div class="btn_login">
              ...
            </div>
</div>

I hope anyone would have an idea.
Thanks,
Omer.

EDIT:
Setting the width for both elements kinda helped but it's still not positioned correctly. See updated css above.

Answer 1

<-span class=""top_nav_separator""> is in your code, this might be the thing that bothers IE

Answer 2

I had the same problem in IE some time ago. It doesn't like list items in a floating div. Adding the following fixed it for me:

display: list-item;
list-style-position: inside;

Answer 3

Can you try reducing the height of your logo class. It is overhanging the menu.