Foros del Web - Imágenes con textos

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Imágenes con textos (http://www.forosdelweb.com/f53/imagenes-con-textos-416043/)

Imágenes con textos

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

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.

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

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>

muchas gracias por vuestros comentarios! Intentaré <img>

un saludo