Background en listas con un menu contextual

[Daca]

Hola!
Estoy haciendo un menu contextual (tras hacer click en el boton derecho se muestra el menu), y me gustaria darle un estilo similar a este:



Fijaos que el menu tiene dos columnas, una donde estan las imagenes (Features, Documentation, ...) y otra donde aparecen los textos ...
De momento quiero buscar una solucion utilizando listas, no quiero maquetar con tablas, pero no consigo que la columna para los iconos, mantenga un fondo uniforme sin notarse un espacio en blanco entre "li".

Código HTML:

<style type="text/css">
  #menu { list-style: none; margin: 0; padding: 0 }
  #menu li { background-image: url ( fondo_x.gif);
  #menu a { text-decoration: none; }
</style>

<ul id="menu">
  <li><img src="icono1.gif" alt="" /><a href="" title="">Texto 1</a></li>
  <li><img src="icono2.gif" alt="" /><a href="" title="">Texto 2</a></li>
  <li><img src="icono3.gif" alt="" /><a href="" title="">Texto 3</a></li>
</ul> 

¿Alguna idea al respecto de como conseguir ese estilo?
Lo unico que consigo es o bien esto (se me repite la imagena lo largo de todo el "li"):


O bien se nota los saltos entre los "li":



Saludos!

[Mikmoro]

Hola, Daca.
Te felicito: una pregunta muy bien planteada.

Podrías probar a añadir a tu selector "#menu li" la propiedad "background-repeat: repeat-y;"

#menu li { background-image: url(fondo_x.gif);
background-repeat: repeat-y;
}

A ver si te sirve.

Mikel.

[Daca]

Hola Mikmoro !
Gracias por decir que plantee bien la pregunta, una imagen vale mas que mil palabras ¿no? ...

Respecto a tu solución, decir que si funcionó, aunque yo ya probé esa opción pero no sirvió en su momento, de todas formas seguro que la aplique mal.
Gracias, y ahora adjunto como queda el tema.

Código HTML:

<style type="text/css"> 
  #menu { list-style: none; margin: 0; padding: 0 } 
  #menu li { 
      background-image: url ( fondo_x.gif);  background-repeat: repeat-y; 
      padding: 4px; 
  }
  #menu a { text-decoration: none; margin-left: 2%; }
  .imagen_left { margin-left: 1%; vertical-align: middle; }
</style> 

<ul id="menu"> 
  <li><img class="imagen_left" src="icono1.gif" alt="" /><a href="" title="">Texto 1</a></li>
  <li><img class="imagen_left" src="icono2.gif" alt="" /><a href="" title="">Texto 2</a></li>
  <li><img class="imagen_left" src="icono3.gif" alt="" /><a href="" title="">Texto 3</a></li> 
</ul> 

Firefox:


I.Explorer (version 6)


Saludos!

[Mikmoro]

Sí, si lo habías probado y no funcionaba y ahora sí, algo estaba mal

Podrías probar con esto:

#menu li img { position: relative;
top: 6px;
}

A ver si te sirve.

Mikel.

[Daca]

Gracias Mikmoro, pero parece que respondimos a la vez, mira la solucion que dí ...

Saludos!

[Mikmoro]

Ah, pues también, perfectamente válida.

Me alegro de que te funcione bien. Hasta la vista.

Mikel.