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

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