Cita:
Iniciado por webosiris 
el elemento A es un elemento INLINE, por lo que tiene el tamaño de su contenido... en este caso al no tener contenido su tamaño es 0 y pro eso no ves la img que le pones de fondo.
Prueba agregando esto:
Código CSS:
Ver original#iconos a{
display:block;
width:45px;
height:45px}
Si hago esto, el menu me sale en vertical
Cita:
Iniciado por webosiris por otra parte, 2 observaciones:
- no es una buena práctica cambiar toda la img en el hover, las img se cargan solo al momento de ser llamadas por lo que si cambias toda al img va a demorar unos segundos en aparecer... en vez de eso [URL="http://librosweb.es/css_avanzado/capitulo_1/rollovers_y_sprites.html"]usa sprites[/URL], osea unifica tus 4 img en 1 sola más grande y luego las vas cambiando con background-position.
- intenta en la medida de lo posible evitar usar IDs, en este caso para los items de la lista lo mejor es usar CLASES
Lo de los sprites no sabria como hacerlo, pues lo que quiero es que cada uno de los iconos cambie de color, por separado, obviamente,
Ya he cambiado los id´s por clases,
A ver, ahora mismo tengo esto:
Código:
HTML
<footer>
<div id="iconos">
<ul>
<li><a class="icono1" href=""></a></li>
<li><a class="icono2" href=""></a></li>
<li><a class="icono3" href=""></a></li>
<li><a class="icono4" href=""></a></li>
<li><a class="icono5" href=""></a></li>
</ul>
</div>
CSS:
#iconos ul li {
display: inline;
list-style: none;
}
#iconos a{
display:block;
width:45px;
height:20px;
}
.icono1 {
background-image: url(../img/casita_L.png); width:21px; height:18px;
background-repeat: no-repeat;
}
.icono1:hover {
background-image: url(../img/casita_on_L.png);
background-repeat: no-repeat;
}
.
.
.
Si que se ven los iconos, pero me aparecen en vertical, y el hover no funciona