Rollover con CSS no funciona en Firefox

hermetika · #1 (**permalink**) 27/09/2005, 03:06

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 !!!

caricatos · #2 (**permalink**) 27/09/2005, 03:09

Hola:

Creo que tendrías que poner position: absolute en el contenedor...

Saludos

hermetika · #3 (**permalink**) 27/09/2005, 03:20

Gracias, caricatos, pero he probado position:absolute en el contenedor, y nada. Lo he probado en la lista, en los items de lista, en los enlaces.. incluso en el body, pero no sirve...

POdeis ver el ejemplo en http://www.inoquo.com/css/prueba_menu.htm