Enralados

Modelo de Cajas y Sidebar

El modelo de cajas o "Box Model" se refiere a la representación de los elementos de una página HTML por medio de cajas rectangulares, las conocidas como DIV. Mediante el lenguaje de hojas de estilos CSS se puede definir el aspecto que tendrán y cómo serán visualizadas. Ancho, alto, margen, espacio de relleno interior, color, bordes, son algunas de las propiedades de las cajas. También se pueden desplazar, ocultar y ubicar en un lugar exacto dentro de la página.

Cualquier Blog o página web está formado por cajas, aunque la mayoría no son visibles a simple vista.

En el "Box Model" estándar el ancho total de una caja es la suma del ancho del contenido, márgenes, rellenos y bordes que se establecen con CSS.

Cuando se define un ancho para una caja, éste se refiere al ancho del contenido.

Por ejemplo:

div {
width: 400px;
padding-left: 40px;
padding-right:40px;
margin-left: 20px;
margin-right: 20px;
border: 5px solid red;
}

El ancho total sería:
20px + 5px + 40px + 400px + 40px + 5px + 20px = 530px

La mayoría de los navegadores aceptan este estándar, no ocurre así con Internet Explorer.

IE7 corrige en parte este inconveniente por el tipo de DOCTYPE que se define en la cabecera de nuestro documento web. Pero aún así IE6 tiene una manera particular de interpretar las medidas de las cajas. Además se pueden obtener resultados imprevisibles si existen cajas dentro de otras cajas. Las propiedades de unas afectan al modo de mostrarse las otras.

Esto lo podemos comprobar especialmente en los Sidebars de nuestros Temas en WordPress.

A veces insertamos código, fotos o cualquier otro elemento y nos llevamos la desagradable sorpresa de que IE6 nos descuadra todo nuestro blog. Incluso teniendo la seguridad de que el ancho del objeto que vamos a ubicar dentro del Sidebar es de menor medida que la caja y que debe encajar sin ningún problema. El sidebar 2 puede mostrarse debajo del sidebar 1 o cualquier otro resultado imprevisto.

¿Por qué ocurre esto?

Normalmente cuando se introduce en una caja un elemento de mayor medida que las propias de la caja, los elementos o cajas más cercanos son empujados fuera de su lugar en la página web.

Esto se puede comprender mejor si sabemos cómo aplica IE6 su particular "Box Model" llamado modo raro (Quirks Model) o modo compatible con páginas antiguas.

En este caso el ancho total coincide con el ancho declarado en el CSS. IE6 resta al ancho del contenido el relleno y los bordes de la caja dejando los márgenes fuera. El ancho de nuestro contenido aprovechable sería así de 310px. 400px - 5 px - 40px - 40px - 5px = 310px

Si introducimos una foto de 380 pixeles de ancho en una caja de 400 px se mostrará perfectamente en todos los navegadores excepto en IE6 puesto que supera el valor de 310px.

Las posibles soluciones son:
- No usar bordes muy anchos, poner los márgenes y padding a cero o reducirlos al máximo que se pueda. Si queremos que una foto de 380px entre en 310px tenemos que ganar espacio en la caja reduciendo las medidas anteriores.
- Si vamos a mostrar texto o elementos inferiores a los 310px podemos reducir el ancho de la caja y así mantener márgenes, bordes y relleno. Aunque suene contradictorio si reducimos el ancho tendremos la seguridad de controlar el posible desborde por anchura de los márgenes ajustándose de esta manera al ancho real mostrado en los otros navegadores. Recuerda que los márgenes son tomados con respecto a la caja anterior, la caja de nuestro sidebar está contenida dentro de otra caja y no podemos arriesgarnos a que IE6 descoloque los elementos.

Sabemos que estas modificaciones no pueden afectar a la apariencia de nuestro diseño en los navegadores que muestran la página correctamente.

¿Cómo hacemos para que sólo afecte a IE6?

Pues la única forma es empleando los conocidos Hacks.

IE6 acepta como válido el caracter guión bajo _ en las propiedades de nuestro archivo de estilos CSS, sin embargo para los demás navegadores no tendrá afecto alguno porque reconocerán el valor como caracter inválido.

Nuestro ejemplo quedaría de la siguiente manera:

div {
width: 400px;
padding-left: 40px;
_padding-left: 0px;
padding-right:40px;
_padding-right:0px;
margin-left: 20px;
_margin-left: 0px;
margin-right: 20px;
_margin-right: 0px;
border: 5px solid red;
_border: 1px solid red;
}

o también:

div {
width: 400px;
_witdh: 270px;
padding-left: 40px;
padding-right:40px;
margin-left: 20px;
margin-right: 20px;
border: 5px solid red;
}

Por supuesto, cada caso particular es diferente y a veces requiere un poco más de esfuerzo. Hay que jugar un poco con las propiedades. Pero básicamente así se emplean los Hacks para IE6.