27 abril 2007

Problemas de visualización de CSS en Firefox y Mozilla

Una de las cosas más complicadas las primeras veces que diseñas con CSS no es que lo que tengas que aprender, sino lo que tienes que desaprender para conseguir que la web se vea bien tanto en Mozilla como en Explorer (por nombrar los dos navegadores más habituales). Por eso, a continuación, voy a nombrar algunos de esos trucos que pueden romperte la cabeza si no sabes cómo solventarlos:

Centrar del contenedor global de la página


Este es el fácil, pero no por ello quiero dejar de nombrarlo.
Para centrar el div contenedor de la página tendría que bastar con: margin: 0px auto; pero como el señor explorer no lo entiende lo que hacemos es engañarle diciendo que centramos el texto del body. Traducido sería algo como:

body{
text-align: center;
}

#contenedor {
width: 700px;
margin:0px auto;
text-align:left;
}


Modificar la sangría izquierda de los elementos de una lista


En un listado, tenga o no topos, si no queremos que a la izquierda de los elementos de esa lista haya un espaciado muy grande, deberemos especificar tanto el margin como el padding. Por ejemplo si quieremos dejar 10 px a la izquierda deberemos poner:

ul{
padding-left: 10px;
margin-left: 10px;
}


Problemas con la ubicación de la barra horizontal de navegación


Si en nuestra web tenemos una barra horizontal de navegación y debajo de ella dos columnas de contenido, deberemos especificarle el alto a su div. Si no lo hacemos, el mozilla interpretará (para la segunda columna) que el último div existente es el de la cabecera y no podremos manejar correctamente el margin y el padding superior. Con lo cual deberemos:

#navegacion {
height:29px;
}


Sin duda hay muchos más, pero de momento estos son los más recientes de mi primera incursión oficial en el diseño de sites íntegramente realizados con XTML y CSS.

Etiquetas: , , ,