Question

I’m trying to setup some CSS sprites, they all function the same, except each one has a different background. This works fine in every browser in OS X but does not work in Firefox for Windows and Linux or IE. The part in particular that does not work is the hovering.

CSS

    .sprite {
        background-position: 0px 0px;
        position: relative;
        padding-right: 25px;
        width: 80px; 
        height: 86px;
        float: left;
    }

    .sprite.videos { 
        background: url('images/button-videos-sprite.png') no-repeat top left; 
    } 

    .sprite.music { 
        background: url('images/button-music-sprite.png') no-repeat top left; 
    } 

    .sprite.twitter { 
        background: url('images/button-twitter-sprite.png') no-repeat top left; 
    } 

    .sprite.facebook { 
        background: url('images/button-facebook-sprite.png') no-repeat top left; 
    } 

    .sprite:hover { 
        background-position: 0px -86px; 
    } 

HTML

            <a href="...">
                <div class='sprite videos'></div>
            </a>

            <a href="...">
                <div class='sprite music'></div>
            </a>

            <a href="...">
                <div class='sprite facebook'></div>
            </a>

            <a href="...">
                <div class='sprite twitter'></div>
            </a>

EDIT

I just upgraded from FF 4 to 8 and everything works in FF now, but IE, not a chance. One thing I’m confused about is that this line must come at the end, even on Chrome:

    .sprite:hover { 
        background-position: 0px -86px; 
    } 

Can anyone tell me why?

Answer 1

Depending on what version you’re using the problem could be that you are trying to use :hover on a div <div> and not a link <a>.