Menu floating to the right on IE and to the left in FF
Posted
by the_drow
on Stack Overflow
See other posts from Stack Overflow
or by the_drow
Published on 2010-03-15T12:25:52Z
Indexed on
2010/03/15
12:29 UTC
Read the original article
Hit count: 315
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 the css:
#navigation_wrap
{
background: url(../images/ltr/nav_bg.png);
height: 34px;
width: 954px;
}
.btn_login
{
float: right;
margin: 4px 4px 0 0;
}
.navigation
{
float: left;
}
.navigation ul
{
list-style: none;
margin: 8px 0 0 15px;
}
.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;
}
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 & 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.
© Stack Overflow or respective owner