Imágenes con textos

[Juaran]

Buenas,

estoy intentando crear una lista horizontal de imágenes pequeñas junto a un texto descriptivo a la derecha o a la izquierda de cada una de ellas. El problema es que el texto me pisa la imagen

el código que tengo es este:

Código:

  <ul id="leyenda">
    <li id="dolbySound">Dolby Sound</li>
    <li id="teaBar">Tea Bar</li>
    <li id="handicapped">Facilities for handicapped</li>
    <li id="carPark">Car Park</li>
  </ul>

Código:

ul#leyenda
{
	border: 1px solid #000;
	list-style: none;
    padding-top: 10px;
    margin: 0;
	width: 65%;
	height: auto 
}

ul#leyenda li
{
	float: left;
	color: #777;
	display: block; 
	padding: 0px 0px 5px 40px;
	text-align: center;
	text-decoration: none;
	width: 35px;
}

ul#leyenda li#dolbySound{
	background: transparent url(../resources/thx.JPG) no-repeat left;	
}	

ul#leyenda li#teaBar{
	background: transparent url(../resources/bar.JPG) no-repeat left;	
}	

ul#leyenda li#handicapped{
	background: transparent url(../resources/chair.JPG) no-repeat left;	
}	

ul#leyenda li#carPark{
	background: transparent url(../resources/parking.gif) no-repeat left;	
}

alguien sabe donde está el problema?

un saludo

[AlvaroG]

es lógico que el texto te quede por encima si le estás poniendo la imagen como fondo...

Quizás quieras probar la pseudoclase :before

Saludos.

[Nigel]

O simplemente poner las imágenes como lo que son, imágenes <img> más que nada porque :before no es que funciones mucho (por no decir que no funciona) en IE

Así te ahorra poner tanto identificador en CSS que no viene a cuento

[Hououji Ayumu]

pues yo tambien te recomiendo que no pongas las imagenes de Fondo porque es muy problematico acomodarles bien y el mayor problema con los visitantes que dependiendo del navegador y demas cosas es dificil predecir como se vera en fin como sea yo tambien te recomiendo usar las <img>

[Juaran]

muchas gracias por vuestros comentarios! Intentaré <img>

un saludo