Archive for Abril, 2009
El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0
photo credit: jeffwilcox
Reporto lo que parece un bug de IE7, por que en el resto de versiones de Internet Explorer parace que no se da el mismo error.
Y es que en IE7, y solo en IE7, cuando un enlace tiene el estilo border: 0, y el estado :hover contiene background-color: #FFF, no funciona dicho background-color.
Pero no funciona solo en el caso de que el color de fondo sea blanco. Si sustituimos #FFF o #FFFFFF por otro color, incluso cercano, como #FEFEFE, se ve perfectamente.
Ojo, si declaramos el border: 0 en un estilo reset del tipo “*{border:0}” estamos condenados.
Dejo un enlace y el código de ejemplo para comprobarlo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<head>
<title>El extraño caso de IE7 y los enlaces con rollover de fondo blanco y borde 0</title>
<style type="text/css">
body {
background-color:#999; }
a{
border: 0;
}
a:hover{
background-color: #FFF;
}
</style>
</head>
<body>
<a href="#">Enlace con border: 0 y color de fondo #FFF en el estado :hover. En IE7 no se verá el color de fondo al hacer rollover.</a>
</body>
</html>
Definir clases CSS concatenadas
El título del post es horrible, pero no quería poner “Concatenar clases CSS” por que no es lo mismo una cosa que otra.
En un elemento html se pueden declarar varias clases separándolas por espacios:
<a class="top current" href="#">subir</a>
De esta manera se pueden mezclar dos estilos:
a.top {color: blue;}
a.current {font-size: 2em;}
Pero también se puede definir otras reglas de estilo concatenado las dos clases:
a.top.current {color: green; font-size: 3em}
Útil tip para aparentemente callejones sin salida. 