Image rollover works in IE but not FF

[webmike]

In podcast #13 you show us how to create tabs using CSS to position an area of an image. This way you can put the different states for each tab in one image. I used this metod to to swap some pictures on my site. Test server located here http://www.guidesrus.com. This works great in IE but fails in FF. Below is the code I used in the html doc and the css doc. Is there a bug in FF that doesn’t allow this to work?

HTML

<div id="image-replacement">
<ul id="rollover">
<li class="rollover-image1"><a href="#">image1</a></li>
<li class="rollover-image2"><a href="#">image2</a></li>
</ul>
</div>

CSS

div#image-replacement {
color: #76653a;
text-decoration:none;
}

ul#rollover {
list-style: none inside;
}

ul#rollover li{
display: inline;
}

ul#rollover li a{
display: block;
height: 192px;
text-indent: -9999px;
float: right;
margin:20px 38px 0px 0px;
}

ul#rollover li.rollover-image1 a {
width: 310px;
background: url(http://www.guidesrus.com/images/repair_business.jpg) top no-repeat;
}

ul#rollover li.rollover-image2 a {
width: 310px;
background: url(http://www.guidesrus.com/images/repair_residential.jpg) top no-repeat;
}

ul#rollover li a:hover {
background-position: bottom bottom;
}

[Cotton]

Works good in Safari, not so much in Firefox 3. Did they fix the display: inline-block bug in Firefox 3?

What happens when you remove this:

Code:

ul#rollover li{
display: inline;
}

[webmike]

Well once again I posted a bit to soon. in the following code I removed one of the bottoms and everything thing now works great.

Code:

old code
ul#rollover li a:hover {
background-position: bottom bottom;
}

New code
ul#rollover li a:hover {
background-position: bottom;
}

[Cotton]

Doh – makes sense. When you specify a position one is for vertical the other is for horizontal. If you specify one of them the other one assumes center. So if you tell something top, then it assumes top and center. If you tell something left, then it assumes left and center. If you tell something bottom bottom it probably freaks out. Validating your CSS probably would have caught that one.

[webmike]

That was one of the first things I did before posting this. It validated fine for that line.

Most important it’s fixed. Thanks for the explanation.

WebMike :D

[Author]

Posts