One Image into Different Social links - html

Question

I found this method of making one image featuring different social icons on it into different social links by using x and y icons to define the section of the image you want featured in a link.
The issue I'm having is that once I set up the code, the background image isn't showing up. If anyone could offer their insight into why this code isn't working as it shoul, it would be greatly appreciated!
CSS:
aside .social {
margin-top: 40px;
}
.social ul {
list-style-type: none;
margin: 0;
}
.social li {
display: block;
width: 24px;
height: 24px;
margin: 0 4px 6px 0;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
line-height: 20px;
}
.social li:nth-child(8n+0) {
margin-right: 0;
}
.social li a, .social li a:active, .social li a:visited {
opacity: 0.5;
-moz-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
}
.social li a:hover {
opacity: 1;
}
.social li.facebook a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) 0 0; }
.social li.twitter a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -24px 0; }
.social li.youtube a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -48px 0; }
.social li.instagram a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -72px 0; }
.social li.google a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -96px 0; }
.social li.flickr a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -120px 0; }
.social li.linkedin a { background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png) -144px 0; }
HTML:
<h1>Find Us On</h1>
<div class="social">
<ul>
<li class="facebook"></li>
<li class="twitter"></li>
<li class="youtube"></li>
<li class="google"></li>
<li class="instagram"></li>
<li class="flickr"></li>
<li class="linkedin"></li>
</ul>
<div>
I have also created a JSFiddle for your convenience here: http://jsfiddle.net/HRHnY/
The code is rendering the list, it's just the background image isn't displaying...

Answer 1

Your anchors are collapsing to 0x0 because you have no content in them. They don't auto-expand to the size of the parent just because you have a background image. Explicitly give them a width/height like the li and you get http://jsfiddle.net/HRHnY/2/
Relevant CSS for the anchors:
display: block;
width: 24px;
height: 24px;
Alternatively you could set width and height to 100% of the parent instead of explicitly setting it.

Answer 2

Working jsFiddle Demo
The a elements, are inline and the width and height of them,
is calculated by the data within them.
So you must set them explicitly, add this rule to your CSS:
.social a {
display: inline-block;
width: 24px;
height: 24px;
}
TIP
It's better to write background-image only once in general selector:
.social a {
background: url(http://static.tumblr.com/csqo1yp/4uimntnjk/social.png);
}
And just change background-position for each element:
.social li.facebook a {
background-position: 0 0;
}
.social li.twitter a {
background-position: -24px 0;
}