CSS Sprite Not Styled

Question

I am having a problem with my css sprites. It looks like it is working (well, to me it looks like it should work). All the sprites just show the first icon but not the other ones.

Looked at many places and could not find an answer.

Thanks for helping me.

I put it up on a seperate page to save time.

[dead link]

And for those who aren't able to go to that page for any reason, here is the code:

<div class="iconDiv">
    <a href="http://facebook.com/" title="Facebook Page">
        <img src="./1px.png" class="iconFB linkIcon" alt=""/><span>Facebook</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.flickr.com/" title="Flickr Page">
        <img src="./1px.png" class="iconFL linkIcon" alt=""/><span>Flickr</span>
    </a>
</div>

And the css is here (shortened):

.iconFB {background-position:0 -40px;}
.iconFL {background-position:0 -82px;}
.iconRSS {background-position:0 -164px;}
.iconY {background-position:0 -246px;}
.linkIcon {
width: 36px;
height: 36px;
background: url(iconSprite.png) no-repeat top left;
}

Thank you very much for helping!

score 3 · Accepted Answer · answered Feb 21 '11 at 10:00

You have a CSS specificity problem.

The CSS like this:

.iconFB {
    background-position:0 -40px;
}

is being overridden by this:

.linkIcon {
    ..
    background: url(iconSprite.png) no-repeat top left;
    ..
}

because background is shorthand for (amongst other things) background-position.

The easiest way to fix this is to swap around the two blocks of CSS, like this:

.linkIcon {
    width: 36px;
    height: 36px;
    cursor: pointer;
    cursor: hand;
    vertical-align:middle;
    background: url(iconSprite.png) no-repeat top left;
}
.iconFB {
    background-position:0 0;
}
.iconFL {
    background-position:0 -82px;
}
.iconRSS {
    background-position:0 -164px;
}
.iconY {
    background-position:0 -246px;
}

(I fixed the position of the Facebook icon, from 0 -40px to 0 0)

score 1 · Answer 2 · answered Feb 21 '11 at 10:00

.linkIcon.iconFB and .linkIcon.iconFL and so on will solve this. Currently your linkIcon style overwrites the positions you set in .iconFB because it's further down in the CSS file.

Edit: (or just move the iconFB etc. styles below the .linkIcon styles)

score 1 · Answer 3 · answered Feb 21 '11 at 10:07

The position of the background image is being overridden by the shorthand background in .linkIcon.

Either re-order the CSS, or use separate background-image and background-repeat declarations (and no background-position) in .linkIcon. I'd argue the latter is preferable.

Stofke · Answer 4 · 2011-02-21T10:27:06.613

Another way would be to use id's as these icons are probably unique and not reused on the same page. As it is used to "identify" a certain icon it makes sense to use an ID instead of a class.

<style>
    #iconFB {
        background-position: 0 0px;
    }

    #iconFL {
        background-position: 0 -82px;
    }

    #iconRSS {
        background-position: 0 -164px;
    }

    #iconY {
        background-position: 0 -246px;
    }
    .linkIcon {
    width: 36px;
    height: 36px;
    cursor: pointer;
    cursor: hand;
    vertical-align: middle;
    background: url(iconSprite.png) no-repeat top left;
}
</style>

<div class="iconDiv">
    <a href="http://facebook.com/" title="Facebook Page">
        <img src="./1px.png" class="linkIcon" id="iconFB" alt=""/><span>Facebook</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.flickr.com/" title="Flickr Page">
        <img src="./1px.png" id="iconFL" class="linkIcon" alt=""/><span>Flickr</span>
    </a>
</div>
<div class="iconDiv">
    <a href="#" title="RSS Page">
        <img src="./1px.png" id="iconRSS" class="linkIcon" alt=""/><span>RSS</span>
    </a>
</div>
<div class="iconDiv">
    <a href="http://www.youtube.com/" title="Youtube Page">
        <img src="./1px.png" id="iconY" class="linkIcon" alt=""/><span>YouTube</span>
    </a>
</div>

CSS Sprite Not Styled

4 Answers4