Foros del Web » Creando para Internet » CSS »

Borde para imagen no sale en Iexplorer con a:hover

Estas en el tema de Borde para imagen no sale en Iexplorer con a:hover en el foro de CSS en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 02/04/2006, 12:26
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
Borde para imagen no sale en Iexplorer con a:hover

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.
  #2 (permalink)  
Antiguo 03/04/2006, 10:36
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.936
Antigüedad: 21 años
Puntos: 65
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:31.