Grow your CSS skills. Land your dream job.

Image rollover works in IE but not FF

  • # October 14, 2008 at 7:36 pm

    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;
    }

    # October 14, 2008 at 8:00 pm

    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;
    }
    # October 14, 2008 at 8:43 pm

    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;
    }

    # October 14, 2008 at 11:21 pm

    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.

    # October 23, 2008 at 3:31 pm

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".