...

View Full Version : rollover background images not showing properly in IE



matazz
02-26-2009, 11:34 PM
Hello,

I have a horizontal navigation menu (created as a list) with background images for the different anchor states.

Everything works fine in FF, Safari, Opera and Chrome, but in IE the background images only show up directly behind the text, they do not fill the entire space like they do in other browsers.

Sample link: http://www.downbound.net/mock/nav-testing/

Here is my CSS:

#buttonbar {
position: relative;
background:url(images/downbound-buttonbar.gif) 0 0 no-repeat;
top:0px;
left:26px;
padding:4px 0 0;
width:980px;
height:26px;
z-index:1;
}

#buttonbar ul {
font-family:Arial, Helvetica, sans-serif;
text-indent:2.2em; /* only affect IE, makes the buttons start in same place as FF and safari */
color:#FFFFFF;
font-size:11pt;
display: inline;
list-style:none;
z-index:61;
}

#buttonbar li {
display: inline;
list-style:none;
padding: 0px 5px 0px 9px;
border-left: 1px solid #FFF;
z-index:61;
}

#buttonbar li.first_item {
border-left: 0;
}

#buttonbar a,
#buttonbar a:visited {
color:#FFF;
background:url(images/button-mainnav.gif) 1px 0 no-repeat;
display:inline;
text-decoration:none;
top:3px;
z-index:61;
border:hidden;
height:26px;
padding:4px 10px 4px;
margin:auto -10px;
}

#buttonbar a:hover,
#buttonbar a:active {
color:#ffcc33;
background:url(images/button-mainnav-over.gif) 1px 0 no-repeat;
border:hidden;
z-index:60;
}

#buttonbar li a.selected {
font-weight: normal;
background:url(images/button-mainnav-over.gif) 1px 0 no-repeat;
left:1px;
top:122px;
height:26px;
padding:4px 10px 4px;
margin:auto -10px;
border:hidden;
z-index:60;
}


And here is my HTML:

<div id="buttonbar">
<ul>
<li class="first_item"><a href="index.php" class="selected">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">Discussion Forum</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

Is there a way to fix this so it also works in IE? I've scoured the web for hours and have not found anything that works.

Any help would be appreciated. Thank you!

Excavator
02-27-2009, 02:14 AM
Hello matazz,
Try adding your padding to your :hover...like this:

#buttonbar a:link,
#buttonbar a:visited {
color:#FFF;
background:url(images/button-mainnav.gif) 1px 0 no-repeat;
display:inline;
text-decoration:none;
height:26px;
padding:4px 10px 4px;
margin:auto -10px;
}

#buttonbar a:hover,
#buttonbar a:active {
color:#ffcc33;
background:url(images/button-mainnav-over.gif) 1px 0 no-repeat;
padding:4px 10px 4px;
}

#buttonbar li a.selected {
font-weight: normal;
background:url(images/button-mainnav-over.gif) 1px 0 no-repeat;
left:1px;
top:122px;
height:26px;
padding:4px 10px 4px;
margin:auto -10px;
}
A little more consolidated approach here - http://nopeople.com/CSS/menu-h_centered-ul/another_centered_ul/index.html

matazz
02-27-2009, 06:45 PM
Adding padding to the hover didn't help.

Thanks for the link to another way of doing it... I used that method and now my rollovers work in all browsers... finally!

I'm still curious as to what I did wrong in my original approach.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum