Position background images for sprites

Question

I'm trying to use sprites for image rollovers but for some reson the code I'm using isnt changing the position of the background

Here's my code

HTML

<div id="top-social">
<a class="top-facebook" href="#">Facebook</a>
<a class="top-twitter" href="#">Twitter</a>
</div>

CSS

#top-social {
width:90px;
height:65px;
background-color:#FFF;
position:absolute;
z-index:9999;
margin-left:820px;
margin-top:-120px;
padding-top:15px;
padding-left:15px;
}


 #top-social a {
 display:block;
 text-indent: -9999px;
 height: 33px;
 width: 33px;
 background-image:url(images/social-icon-sprites.png);
 background-repeat: no-repeat;
 float:left;
 margin-right:8px;

 }

 #top-social .top-facebook a {background-position: 0px 0px;}
 #top-social .top-facebook a:hover {background-position: 0px -32px;}

 #top-social .top-twitter a {background-position: 32px 32px; }
 #top-social .top-twitter a:hover {background-position: 0px -32px;}

score 0 · Accepted Answer · answered Aug 23 '12 at 19:06

You have errors in your css rules :

Change

 #top-social .top-facebook a {background-position: 0px 0px;}
 #top-social .top-facebook a:hover {background-position: 0px -32px;}

to

#top-social a.top-facebook {background-position: 0px 0px;}
#top-social a.top-facebook:hover {background-position: 0px -32px;}

(and the same for the 2 other following rules)

The rule you defined would mean that a a has to be in another element of class top-facebook.

Position background images for sprites

1 Answers1