a hover se corta con imagen

[cham]

Hola,
Mi problema es que creé un enlace para cerrar una ventana y le puse una imagen que al pasar el raton por encima la sustituye por otra. En iexplorer me funciona bien pero en firefox al poner el ratón encima la imagen sale cortada y se desplaza hacia abajo y no sé porqué:

Aqui el codigo:

<div class="barrap">
<a href="javascript:window.close();"><img src="Images/cerrar1.png" width="33" height="31" alt="Cerrar ventana" border="0"></img></a>
</div>

El css es este:

a:link a:visited
{
width:33px;
height:31px;
border:0px solid;
display:block;
}

a:hover
{
background-image:url(Images/cerrar2.png);
}

a:hover img
{
background: transparent;
visibility: hidden;
}

Gracias.

[sanxuan]

En mi Firefox la imagen parpadea al pasar por encima en lugar de desaparecer todo el tiempo. Al usar imágenes diferentes el comportamiento puede variar. Algo está funcionando mal en Firefox o si lo prefieres, no está funcionando todo lo bien que debiera.

Yo suelo usar este otro método y creo que da menos problemas:
- Creo un fichero con una imagen transparente .gif o .png. Suelo usarla de 1px por 1px para poder reutilizarla, pero puedes darle el tamaño que quieras. Imagina que la llamas transparente.gif. En la etiqueta o en el CSS le das a esta imagen el ancho y alto que necesites.
- Al enlace le doy un background para el estado :link y otro para el estado :hover y :active. No hace falta declarar el display:block ni darle el tamaño de la imagen. Se ajustará automáticamente. Supongo que funcionaría igual usando el background de la imagen.

[stingofung]

Saludos "cham",

Prueba sustituir a:hover actual por este:

Código CSS:

a:hover
{
width:33px;
height:31px;
background-image:url(Images/cerrar2.png);
}
 

Comenta a ver que tal.

[cham]

Gracias por vuestras aportaciones, pero no he conseguido solucionarlo aún.

Si le pongo el ancho y el alto en el hover como dices tu stingofung no me sale, y el otro metodo de la imagen transparente como me dices tu sanxoan, el enlace no me aparece y cuando pongo el raton encima me sale la imagen y en firefox me sigue saliendo igual.

De todas formas voy a utilizar otro método de enlace y este lo abandono por imposible.

Gracias por vuestro tiempo