Fuhh... lo siento... pero sigue igual
Este es el código en el css:
/*Imágenes de la p principal donde aparecen diferenctes servicios */
div.menuprincipaldiv{height:150px;margin:3px;}
.menuprincipal ul {
width: 100%;
display: block;
height: 150px;
}
.menuprincipal li {
display: block;
float: left;
margin: 5px;
width: 70px;
height: 150px;
}
.menuprincipaltext{
margin-top:40px;
text-align:center;
}
.menuprincipaltext a{color:#3399CC;}
.menuprincipaltext a:hover{color:#FF9933;}
Y en el html:
Código HTML:
<div class="menuprincipaldiv">
<ul class="menuprincipal">
<li><img title="Enlazar" height="70" width="70" src="/imagenes/servicios/enlazar.jpg" /><a href="/enlazar.php" class="menuprincipaltext">Enlazar</a></li>
<li><img title="Test" height="70" width="70" src="/imagenes/servicios/test.jpg" /><a href="/otros/test.php" class="menuprincipaltext">Test</a></li>
<li><img title="Noticias" height="70" width="70" src="/imagenes/servicios/noticia.jpg" /><a href="/servicios/noticias/allnoticias.php" class="menuprincipaltext">Noticias</a></li>
<li><img title="SMS" height="70" width="70" src="/imagenes/servicios/sms.jpg" /><a href="/servicios/sms/smsgratis.php" class="menuprincipaltext">SMS</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chtexto.jpg" /><a href="/chistes/texto/chistestexto.php" class="menuprincipaltext">Chistes</a></li>
<li><img title="Chistes" height="70" width="70" src="/imagenes/servicios/chgraficos.jpg" /><a href="/chistes/graficos/humorgrafico.php" class="menuprincipaltext">Test</a></li>
<li><img title="Más" height="70" width="70" src="/imagenes/servicios/mas.gif" /><a href="/menu.php" class="menuprincipaltext">Más</a></li>
</ul>
</div>
Bueno... en FF se ve igual que en la imagen anterior (el a:hover sigue sin funcionar)... EN el IE 8 no lo sé, ya que he formateado el ordenador y me trae el 6... pero en este hace algo muy extraño...
El texto sale unos 50 o 60 px más debajo de la imagen y al poner el ratón encima, la imagen se pega al texto...
Saludos!