Problema com background CSS

Montei um esquema de cabeçalho, porém estou com problemas para exibir os ícones das redes sociais.

A imagem das redes está unida numa só (81x27).

O que acontece é que a div#social aparece, mas os links não possuem altura nem largura, mesmo eu definindo no CSS.

HTML:

<header id="header">
	<div id="site-logo">
 <a href="#">
 <img src="images/logo.png" />
 </a>
	</div>
	<div id="social">
 <a class="face" href="#" target="_blank"></a>
 <a class="twitter" href="#" target="_blank"></a>
 <a class="blogger" href="#" target="_blank"></a>
	</div>
 <div class="clear"></div>
</header>

CSS:

#header {
	position: relative;
	margin:0 auto 20px;
	padding:30px 0 0 0;
	width:960px;
	height:226px;
	z-index: 9999;
	background:url('images/cabecalho.png')center 30px no-repeat;
}
#site-logo {
	position:absolute;
	width:210px;
	height:77px;
	top:31px;
	left:59px;
}
#social {
	width: 115px;
	height: 27px;
	position: absolute;
	right: 16px;
	top: 41px;
}

#social a {

	width: 27px;
	height: 27px;
	background-image:url(images/social.png);
}

#social a.face {

	background-position: 0 top;
	margin-right:17px;
}

#social a.twitter {

	background-position: -27px top;
	margin-right:17px;
}

#social a.blogger {

	background-position: -54px top;
}