CSS Sprite Not Styled - css

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!

Answer 1

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)

Answer 2

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

Answer 3

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.

Answer 4

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>