...

View Full Version : CSS Navbar not displaying properly in other browsers



scottyearl
05-19-2010, 01:19 PM
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

SB65
05-19-2010, 02:11 PM
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.

scottyearl
05-19-2010, 03:32 PM
Excellent, thank you so much, that worked perfect :)

drhowarddrfine
05-19-2010, 03:59 PM
FF and Safari are doing the right thing and IE typically isn't.

Fixed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum