Sprites not displaying - css

Question

Sprite rollover images not displaying.
The goal is to have a row of icons with a rollover controlled by CSS.
Currently, the code below does not display any images...what am I missing?
CSS:
#social {
margin: 0;
padding: 0;
height: 15px;
}
#social li {
margin: 0 5px 0 0;
padding: 0;
list-style-type: none;
display: inline;
height: 15px;
float: left;
}
#social li.last{
margin-right:0px;
}
#social li a {
background-image: url("../images/icon_twitter.png") 0px 0px;
background-repeat: no-repeat;
display: block;
height: 15px;
width: 18px;
}
#social li#social-twitter a{
background-position: 0px 0px;
}
#social li#social-twitter a:hover {
background-position: 0px -15px;
}
#social li#social-youtube a{
background-position: -18 top;
}
#social li#social-youtube a:hover {
background-position: -18 -15px;
}
#social span {
display: none;
}
HTML:
<ul id="social">
<li id="social-twitter"><span>Twitter</span></li>
<li id="social-youtube" class="last"><span>Youtube</span></li>
</ul>

Answer 1

You are trying to set the background position within background-image.
Change this:
background-image: url("../images/icon_twitter.png") 0px 0px;
To this:
background-image: url("../images/icon_twitter.png");
background-position: 0px 0px;

Answer 2

Problem: You are using background-position with background-image property
Solution: Either use only background property or use background-position separately
background: color url(src) repeat position;
or
background-image: url(src);
background-position: position;
Your code should like this:
background: url("../images/icon_twitter.png") 0 0 no-repeat;
Note: You should use px (or any other unit) with non zero numbers and zero should be used without unit.