Hola!

he intentado hacer varias cosas con listas aplicando CSS y he conseguido alguna que otra cosa pero ahora me encuentro en una situación que no consigo solucionar, os explico.


El codigo HTML es este:
<div id="opciones">
<ul>
<li class="primero">Opcion 1</li>
<li class="segundo">Opcion 2</li>
</ul>
</div>
El problema que me sucede es que yo coloco las imagenes que realmente tienen dimensiones 128x128 como fondo del elemento LI, entonces el texto queda sobreescrito en la imagen y yo realmente deseo que quede bajo la imagen pero por más que lo intento no consigo que quede correctamente bajo la imagen.

¿Alguien podría ayudarme?
He buscado por Google y he encontrado algunos ejemplos pero casi nunca me dan muchas pistas...

Muchas gracias!

Muchas gracias m0rk!
En parte me ha servido para coger la idea de padding porque tal y como me indicas no funciona bien, al final he hecho lo siguiente:

#opciones {
background-color: #99CCFF;
margin: 0 auto;
max-width: 30em;
min-height: 130px;
padding: 15px;
}

#opciones ul {
list-style-type:none; /*con esto quitamos las viñetas*/
display: inline-table;
padding-left: 40px;
}
#opciones li {
display: inline-table;
text-align: center;
padding-left: 40px;
}
#opciones a {
display: block;
padding-top: 130px;
width: 130px;
font-size: 16px;
}
#opciones .primero a {
background: url("URL") top no-repeat;
}

#opciones .segundo a {
background: url("URL") top no-repeat;
}
Ahora el efecto es el que yo quiero conseguir, pero solamente en Firefox, si el usuario es de Internet Explorer las imagenes quedan desplazadas a la derecha y una encima de otra.

Así:

Opcion 1

Opcion 2

Y desplazado a la derecha :S

¿Algo que cambiar para que tambien funcione en IE?
CSS es muy útil porque simplifica el codigo HTML pero encontrar las medidas exactas en muchas ocasiones me esta siendo un tanto pesado, me dan ganas hacer todo con tablas por muy primitivo que sea xD

A ver si podeis echarme una mano con esto

Muchas gracias!

Pues es extraño, a mi me funcionaba  :S

Bueno, he hecho otro con un poco más de tiempo. Previsualizado con Firefox e IE 7 se ve así:


CSS:
#naveda {
list-style: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF00FF;
text-align:center;
}
#naveda li {
background: url(phperos.gif) top no-repeat;
padding-top:35px;
width:90px;
margin: 10px;
float:left;
}

HTML:
<ul id="naveda">
<li>Opcion 1</li>
<li><a href="#">Opcion 2</a></li>
</ul>

Pruébalo y ya me dirás! Y si algo no entiendes (tu o cualquiera) preguntad!

Saludos!