CSS Navbar not displaying properly in other browsers

Hi guys,

Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens,

Thanks in advance,

Scott.


HTML:

<div class="navbar">
<ul id="navlist">
<li><a href="./shop">SHOP NOW</a></li>
<li><a href="index.php">HOME</a></li>
<li><a href="contact.php">CONTACT</a></li>
<li><a href="faq.php">F.A.Q.</a></li>
</ul>
</div>

CSS:

.navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
display:inline;
}
.navbar a {
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}

Displayed in IE:

http://i41.tinypic.com/2nc143k.jpg

Displayed in FF/Safari:

http://i40.tinypic.com/vak35.jpg

It's because you're applying a width to an inline element. Inevitably, FF and Safari are doing the right thing and IE isn't, even though it's doing what you want. Try:

.navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
float:left;
}
.navbar a {
display:block;
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}


By setting your a element to display:block the width will be applied, but this then means your menu items don't sit next to each other, so float:left is added to the li element to compensate for this.

Excellent, thank you so much, that worked perfect :)

FF and Safari are doing the right thing and IE typically isn't.

Fixed.