CSS sprites not working in <li> items - html

Question

I have a sprite-sheet with 4 social sprite buttons that I can't get to work as list items after many hours of researching.
Each sprite button should take up the same background-position as in the sprite-sheet. I have even tried setting each background-position: 0 0; without success.
Any suggestions would be appreciated.
.s-1-facebook,
.s-2-tweet,
.s-3-google,
.s-4-email {
<!--background-image: url('http://i.stack.imgur.com/tpoaF.png');-->
background-image: url('images/sprites.png');
background-repeat: no-repeat;
display: inline-block;
list-style: none;
margin: -12px 0 0 -16px;
position: relative;
}
.s-1-facebook {
display: inline-block;
list-style: none;
background-position: 0 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-2-tweet {
display: inline-block;
list-style: none;
background-position: -32px 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-3-google {
display: inline-block;
list-style: none;
background-position: -72px 0;
width: 32px;
height: 32px;
position: absolute;
}
.s-4-email {
display: inline-block;
list-style: none;
background-position: -108px 0;
width: 32px;
height: 32px;
position: absolute;
}
<ul>
<li class="s-1-facebook">
</li>
<li class="s-2-tweet">
</li>
<li class="s-3-google">
</li>
<li class="s-4-email">
</li>
</ul>

Answer 1

Tips for using sprites in CSS
Let's take the image you provided as example. The image has 140px width and 32px height.
Since we have 4 equally distributed icons in the image, we can assume that every icon will have 35px width (140 / 4) and 32px height.
In order to make the sprite work, we will have to assign those width/height values to an element of our choose, in your case, we will use the tag a inside every li.
To change the icon shown in every class, we will use the CSS property background-position.
Since we already know that our sprite have 4 columns and 1 row, we will only need to use the x position (using factors of 35).
Example
ul.social {
list-style: none;
margin: 0;
padding: 0;
}
ul.social li {
float: left;
}
ul.social a {
background-image: url('http://i.stack.imgur.com/tpoaF.png');
width: 35px;
height: 32px;
display: inline-block;
}
ul.social li.s-2-tweet a {
background-position: -35px 0;
}
ul.social li.s-3-google a {
background-position: -70px 0;
}
ul.social li.s-4-email a {
background-position: -105px 0;
}
<ul class="social">
<li class="s-1-facebook">
</li>
<li class="s-2-tweet">
</li>
<li class="s-3-google">
</li>
<li class="s-4-email">
</li>
</ul>

Answer 2

Your comment for the background image is using HTML comment tags which are invalid in CSS and causing your sprite image to fail. Remove that line and you can be on your way.