Borde para imagen no sale en Iexplorer con a:hover

kahlito · #1 (**permalink**) 02/04/2006, 12:26

Hola, ¿por qué no funciona esto en Iexplorer?:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba imagen</title>
<style type="text/css">
a img {
	border: 10px solid #999;
	}
a:hover img {
	border: 10px solid #333; 
}
</style>
</head>

<body><a href="final3.html"><img src="imagen.gif" alt="Mi imagen" width="29" height="18"  /></a>
</body>
</html>

¿Deberia funcionar no?

Tambien lo hago de estas dos maneras y tampoco, ya que con .imagen en Iexplorer se come el borde por arriba y con .imagen2 no va en ninguno:

Código HTML:

<style type="text/css">
a.imagen {border: 10px solid #999;}
a.imagen:hover{border: 10px solid #CCC;}
img {border: 0;}
</style>
<style type="text/css">
.imagen2 a{border: 10px solid #999;}
.imagen2 a:hover{border: 10px solid #CCC;}
</style>

<a href="enlace.html" class="imagen" ><img src="imagen.gif" alt="Mi imagen" width="29" height="18"  /></a>
<a href="enlace.html" class="imagen2"><img src="imagen.gif" alt="Mi imagen" /></a>

¿Alguna otra recomendación?, saludosss.

kahlito · #2 (**permalink**) 03/04/2006, 10:36

Hola de nuevo, al final la solución está en agregar un borde de 0 pixeles para el estado o clase principal del hover, o sea el "hover sin img".

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Borde en imágenes</title>
<style type="text/css">
    a img{border: 1px solid #fff;}
    a:hover img{border: 1px solid #ccc;}
    a:hover {border:0;}
    a.img-border img {border: 10px solid #E6E3DE;margin:20px;}
    a.img-border:hover img {border: 10px solid #B6B4B1;}
    a.img-border:hover {border: 0;}
    .imagen2 a img{border: 10px solid #999;}
    .imagen2 a:hover img{border: 10px solid #CCC;}
    .imagen2 a:hover {border: 0;}
</style>
</head>
<body><a href="enlace.html"><img src="imagen.gif" alt="" width="29" height="18"  /></a>
<a href="hola.html" class="imagen2"><img src="imagen.gif" alt="" /></a>
<a href='#' class='img-border'><img src="imagen.gif"></a>
</body>
</html>

Ahora me sirve en los tres ejemplos, lo dejo ahí por si le sirve a otro o para corregirlo en el caso de que hayan más y mejores opciones

Saludosss