CSS Sprite no muestra en el navegador

[danielugalde]

Hola miren tengo un problema estoy realizando un menú de tabs con su icono pero no muestra el icono en ningún navegador pero si lo muestra en dreamweaver estoy usando Sprites css aquí les dejo el codigo

Aqui el HTML:

Código HTML:

<ul class="tabs">
  <li><div class="icon" id="1"></div><a href="#usuarios">Usuarios</a></li>
  <li><div class="icon" id="2"></div><a href="#mensajes">Mensajes<?php ?></a></li>
  <li><div class="icon" id="3"></div><a href="#peticiones">Peticiones<?php ?></a></li>
  <li><div class="icon" id="4"></div><a href="#conexiones">Conexiones<?php ?></a></li>
  <li><div class="icon" id="5"></div><a href="#consulta">Consulta</a></li>
  <li><div class="icon" id="6"></div><a href="#subir">Subir</a></li>
  <li><div class="icon" id="7"></div><a href="#eliminar">Eliminar</a></li>
  <li><div class="icon" id="8"></div><a href="#salir">Salir</a></li>
</ul> 

Aqui el CSS:

Código css:

.icon{ width:32px; height:32px; display:block; float:left; margin:9px 04px 9px 4px;}
 
#1{ background-image:url(../img/set_1-sprite.png); background-position:0px 128px;}
#2{ background-image:url(../img/set_1-sprite.png); background-position:0px 160px;}
#3{ background-image:url(../img/set_1-sprite.png); background-position:0px 96px;}
#4{ background-image:url(../img/set_1-sprite.png); background-position:32px 128px;}
#5{ background-image:url(../img/set_1-sprite.png); background-position:0px 32px;}
#6{ background-image:url(../img/set_1-sprite.png); background-position:64px 64px;}
#7{ background-image:url(../img/set_1-sprite.png); background-position:32px 64px;}
#8{ background-image:url(../img/set_1-sprite.png); background-position:64px 96px;}