I am attempting to place sprites in front of its corresponding anchor/link tag(s) however the sprite(s) are not appearing. I'm not sure what I am doing wrong but any help and explanation is appreciated. I have attached the sprites.gif. Thank You.

HTML code:
Code:
 
<ul class="postmetadata clearfix">
	<li><a class="post-comment" href="#" title="post-comment">Post a Comment</a</li> |
	<li><a class="email" href="#" title="email">E-mail</a></li> |
	<li><a class="print" href="#" title="print">Print</a></li> | 
	<li><a class="share" href="#" title="share">Share</a></li> |
	<li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
				</ul>
CSS code:
Code:
ul.postmetadata li{
	list-style-type: none;
	font-size: 12px; 
}

ul.postmetadata li a {
	background: url('img/sprites.gif')top left;
	background-repeat: no-repeat;
	display: block;
}

 li a.post-comment{
	background-position: 0 -624px;
	height: 12px;
	width: 11px;
}