Image sprites para menu vertical problema

[piojoso]

Hola que tal en mi sitio tengo un menu despegable vertical con links a las categorias de mi sitio. colocaba una imagen a la izquierda en cada elemento de la lista utilizando ul, li y list-style-image: url.

Ahora estoy intentando optimizar los tiempos de carga e la pagina y por ello estoy probando los sprites (las imagenes agrupadas), pero no se como indicar las imagenes y la posición en list-style creo que no se puede. Leyendo probe con el background:url con esta tecnica puedo posicionar la imagen a la izquierda pero me genera un problema con el texto del vinculo ya que se modifica el ancho de la etiqueta li.

Código CSS:

.cat-box-items2 ul{
list-style-type:none;
}
.cat-box-items2 ul li {
background-color: #CCC;
background:url(http://www.fusavideos.com/imagenes/barranav1.gif) no-repeat;
}
.cat-box-items2 ul li.spok {
width: 11px; //si saco el width el texto se ve bien pero las imagenes no se ven recortadas y se ve todas las imagen el sprite de fondo.
background-position: -128px 0px;
}
 

Código HTML:

<div align="left" class="cat-box-items2">
<ul>
<li class="spok"><a href="url" style="padding-left: 18px;">texto link1</a></li>
<li class="spok"><a href="url" style="padding-left: 18px;">texto link2</a></li>
...
</ul>
</div>
 

Los texto largos de mas de una palabra se agrupan uno debajo del otro y no se aprovecha el real ancho del DIV.

[pzin]

El problema es la imagen en si. Si ordenas los iconos verticalmente —en la propia imagen— no te daría ese problema. Y tal vez dejar algo de espacio entre las imágenes si luego usas padding o algo.

[piojoso]

tendria el mismo problema pero esta vez verticalmente :P porque tendria que aplicarle el alto al LI.

resolvi el problema con before.

saludos.