23 marzo 2010 in XHTML/CSS by dacho

Bueno continuando con nuetra seccion sobre errores y problemas que tenemos cuando utilizamos CSS, veremos un problema muy comun y que si no lo sabes entonces no vas a poder saber que a veces los elementos HTML se ven diferentes en Internet explorer o en Firefox o en chrome. Se trata sobre dos propiedades de css: Padding y Border.

Primero para los que no lo saben/recuerdan, el padding es el margen interno de un elemento y el border es el borde xD.

El error

Quienes diseñaron el estandard de CSS, estipularon que el ancho de un elemento esta dado por el width mas el padding izquiero, mas el padding derecho, mas el borde izquiero, mas el borde derecho. Es decir si yo hago que un div tenga las siguientes propiedades: div{width: 150px; padding: 0 10px 0 15px; border: 1px solid #999999; }, entonces este div tendria que tener de ancho (150 + 10 + 15 + 1 + 1)px = 177px.

Bueno perfecto :) pero… los muchachos de Microsoft otra vez aqui nos complicaron la vida, ¿porque? bueeeeno, porque para internet explorer el padding y el borde no se suman al width como lo indican los estandares, sino que el ancho total del elemento sera el que se especifique en el width y el padding y el border se cuentan para adentro. es decir que en el ejemplo anterior: div{width: 150px; padding: 0 10px 0 15px; border: 1px solid #999999; } en internet explorer se ve de ancho 150px y no 177px como especifica la W3C.

Aqui una imagen que intenta aclarar esto que estuve diciendo en palabras:

¿Que podemos hacer para solucionar este tema?

Yo basicamente no soy partidario de utilizar hacks de CSS cuandos puede hacer algo sin engañar a los navegadores. Basicamente para poder dar una solucion veamos los casos en los que vamos o no vamos a tener problemas:

No vamos a tener problemas si: No especificamos un ancho o alto del elemento, porque si por ejemplo colocamos un div sin width, entonces este se ajustara al tamaño del elemento interno y a esto se le sumara el padding y el borde correspondiente

Vamos a tener problemas si: Especificamos un ancho o alto de un div con padding o con border. Ya explique el porque antes, pero ¿que podemos hacer?

Una de las soluciones es utilizar un elemento que tenga el ancho que queremos colocar (en nuestro ejemplo 177px) y dentro colocar el elemento SIN colocarle el ancho pero le ponemos el padding que corresponda. En el ejemplo quedaria asi:

Codigo HTML

<div>
   <div>contenido</div>
</div>

Codigo CSS

div{ width: 177px; }
div div{ padding: 0 10px 0 15px; border: 1px solid #999999; }

Otra solucion es utilizar un hack que lo que hace es indicarle a internet explorer algo pero que los otros exploradores lo ignoran, como no me gusta esta practica no la expongo aqui pero pueden googlearlo y van a encontrar muchos ejemplos de esto, busquen box model hack

Espero les sea util el articulo y como siempre nte cualquier duda, error que detecten o correccion comenten :)

Entradas Relacionadas: