Archive for the ‘CSS’ Category
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>
Centrar una web, vertical y horizontalmente, con CSS y sin tablas ni efectos secundarios.
Para concretar desde el principio, este tip-tutorial describe como centrar un elemento de bloque, un div en este caso, de dimensiones fijas y que puede albergar un sitio web, en medio de la ventana de un navegador, tanto vertical como horizontalmente.
Lo que tiene de especial este artículo con respecto a otros de la misma temática, es que resuelve lo que vengo a llamar “efectos secundarios”, y me refiero al molesto comportamiento del div cuando redimensionas el navegador y parte de la web queda oculta sin que se pueda acceder a ella con las barras de scroll, no por que no estén si no por que no dan de sí.
Desde ahora me referiré al div#contenido como “Web“.
Para los más impacientes aquí está un ejemplo de web centrada vertical y horizontalmente, y a continuación el código xhtml/css:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
<style media="screen" type="text/css">
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
#contenido {
position:absolute;
background-color:#ccc;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
</style>
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Ahora vienen las explicaciones.
La manera más fácil de centrar una Web es darle al tag html y body una altura (height) de 100%, añadir una tabla de una sola celda con alineación vertical y horizontal, y colocar dentro un div de dimensiones fijas.
Rápido, sencillo, y alejado de las buenas prácticas. ¿Por qué? Por que no se debe utilizar una tabla para maquetar una web, pues no es su cometido. Las tablas sirven para presentar datos de forma tabular.
Semánticamente, los tags dentro de una tabla disminuyen su valor específico de cara a buscadores, y los lectores de pantalla para discapacitados escupen una cantidad de información deslabazada casi imposible de entender, por poner un par de ejemplos.
Asi que el reto era crear una plantilla de partida que utilizara solo CSS.
El archivo html inicial sería así:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sin título</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Es muy importante incluir el Doctype adecuado por que de ello depende que los navegadores interpreten correctamente el CSS posterior.
En mi ejemplo he utilizado XHTML Transitional, pero creo que funcionará igualmente el Strict.
La mayoría de soluciones que encontré en Internet se pueden resumir así:
#contenido {
position:absolute;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
Se da posicionamiento Absolute al div contenedor. Se establecen sus dimensiones. Se posiciona su esquina superior izquierda justo en el centro de la pantalla. Y mediante un margen negativo igual a la mitad de sus dimensiones se rehubica centrado en pantalla.
Y funciona. Pero …
En caso de hacer más pequeña la ventana cliente del navegador que el tamaño de la Web, aparecen los efectos secundarios:
El defecto es más acusado cuanto más disminuye la ventana del navegador.
Y se da tanto vertical como horizontalmente. Esto es así a causa de que el posicionamiento, por ser absoluto se situa independiente de la lista de elementos del código, y aunque tiene el centro en la página, los márgenes negativos pueden situar la web fuera de la vista de la ventana.
La solución es muy simple pero no funciona en Internet Explorer 6 y predecesores, (aunque esto también se resuelve después).
Simplemente hay que darle al bloque contenedor de la Web, en mi caso el propio Body, un ancho y alto mínimos, igual al tamaño del bloque #contenido.
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
Lo de la posición relativa permite que algún navegador, no recuerdo cual, interprete correctamente dichos ancho y alto mínimos.
Ahora el resultado de redimensionar el browser cambia aparentemente el comportamiento de la Web de una posicion centrada a otra fija desde la parte superior izquierda.
La visualización es correcta en Internet Explorer 7, Firefox, Opera, Safari, y en el extinto Netscape (incluso en la versión 7.2 que usaba un motor para renderizar diferente al de Firefox).
Pero en IE6 y también en IE5.5 (no quise remontarme más allá) no funciona, no hay soporte para ancho y alto mínimos. No interpretan el min-width y el min-height. Y no conseguí que ningún hack css funcionara correctamente.
Esas versiones del browser de Microsoft son importantes, sobre todo la 6, por que actualmente es la que tiene más presencia en Internet.
Lo ideal sería que todo se resolviera solo con CSS, pero su inacabada implementación en algunas versiones de Internet Explorer hacen tarea imposible dicho propósito.
Asi que “Para problemas propietarios soluciones propietarias”.
Gracias a los comentarios condicionales y a unos scripts propiedad de Microsoft, solo interpretados por IE, se logra el milagro.
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
Las expresiones incluyen un condicional terciario que cambia los valores de los parámetros CSS en función de las proporciones de la ventana cliente del navegador.
No deja de ser un parche, pero funciona y permite validar el XHTML y el CSS de la página.
Si alguien encuentra alguna manera de hacerlo todo con CSS, sin hacks, ni soluciones propietarias, que deje un comentario.
Me encantaría hacer un UPDATE al post y seguir aprendiendo.