Hola,
Mi problema se parece al tópico comentado más abajo, pero no es exactamente el mismo:
Quiero usar una imagen transparente como link en un menu de lista horizontal con rollover mediante CSS:
Este es el código:
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Rollover</title>
<style type="text/css">
div.container{
width:250px;
height:31px;
border:1px solid #ccc;
}
ul.lista{
list-style-type: none;
margin:0;
padding:0;
}
li.lista{
display:inline;
}
a.uno:link, a.uno:visited{
background-image:url(link1.gif);
background-position:0 0;
}
a.uno:hover, a.uno:active{
background-image:url(link1.gif);
background-position:0 -31px;
}
a.dos:link, a.dos:visited{
background-image:url(link2.gif);
background-position:0 0;
}
a.dos:hover, a.dos:active{
background-image:url(link2.gif);
background-position:0 -31px;
}
</style>
</head>
<body>
<div class="container">
<ul class="lista">
<li class="lista"><a href="#" class="uno"><img src="transparente.gif" width="100" border="0"></a></li>
<li class="lista"><a href="#" class="dos"><img src="transparente.gif" width="100" border="0"></a></li>
</ul>
</div>
</body>
</html>
La cuestión es que funciona bien en IE, pero en Firefox, el background me aparece más abajo, como a media altura, y si lo subo mediante margin-top negativo, se recorta. Alguna sugerencia ???
Gracias a todos y todas !!!