CODEWITHSUNDEEP
csscss-sprites
Dex
Dex

Reputation: 12759

CSS Sprite Problems

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?

Upvotes: 1

Views: 898

Answers (3)

kamatchikumar-India
kamatchikumar-India

Reputation: 127

You can't put a <div> element inside of an <a> element. This is one of the validations problems with your code. The correct approach is to put the <a> inside of the <div>:

<div><a href="#"></a></div>

Upvotes: 0

Matijs
Matijs

Reputation: 3178

I would recommend changing your css as follows:

.sprite {
    background: transparent none no-repeat 0px 0px; /* full shorthand */
    position: relative;
    padding-right: 25px;
    width: 80px; 
    height: 86px;
    float: left;
}

And then for each .sprite.xxxx block do:

.sprite.videos { 
    background-image: url('images/button-videos-sprite.png'); /* override just the background-image... */
    background-position: top left; /* ... and the background-position */
}

And leave the .sprite:hover block intact:

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

Upvotes: 0

Filip
Filip

Reputation: 2522

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>.

Upvotes: 1

Related Questions