CSS: IE vs. Mozilla
Mucha gente piensa que trabajar con CSS es un dolor de cabeza, pero en realidad no es el CSS el que fastidia sino la diferente forma de interpretar el modelo de cajas que tienen Internet Explorer y Mozilla. Cuando se define el ancho de una capa (usando "div"), y además se le pone espacio alrededor ("padding"), IE incluye ese espacio dentro del ancho definido, mientras que Mozilla da el ancho y le *añade* el espacio extra. Si defino, como para este blog, una capa de 600px de ancho y le pongo 20px de padding, Mozilla me da una capa de 640px de ancho, lo que ocasiona un problema con la capa de las hojitas que quería que flotara justo en el límite derecho de la capa principal.
Después de mucho buscar, vía Google claro, me topé con esa explicación que recordaba vagamente, de las diferentes formas de interpretar. La idea que me dio la solución la encontré en un foro, pues al parecer a todos nos pasa lo mismo: en lugar de darle el "padding" a la capa principal, definir el ancho de la principal y darle 0px de espacio, y dentro de esta principa definir otra con el padding que yo quiera y con ancho igual al de la principal MENOS los px que le pongo en el padding. Osea:
CSS:
#general {
position: absolute;
left: 0px;
top: 0px;
width:600px;
padding:0px;
z-index:1;
}
#contenedor {
width:560px;
padding:20px;
z-index:2;
}
HTML:
<div id="general">
<div id="contenedor">
(aca va el contenido, tablas y todo lo demas)
</div>
</div>
¡Y voilá! Se ve bien en IE Y Mozilla... para todos los fanáticos del código abierto y el software libre. Es un truco que "ensucia" un poco mi código pero era eso o tener unas hojitas flotantes fuera de lugar, o arriesgarme a manejarlo con detectores Java de navegador que no siempre están activados. ¿Alguien tiene alguna otra sugerencia de cómo pude haber manejado esto?
Comentarios ajenos
Justo hace unos días llegué a esa conclusión "por tonteo", pues soy autodidacta en CSS. Resulta que mi weblog no se veía "bonito" en MSIE. Y bueno, que tenía que arreglarlo.
Dichoso MSIE... :)
Saludos!
Dicho por: Francisco | Mayo 12, 2004 10:45 PM
Abundamos los autodidactas :) Sí, realmente es algo que una vez escuché pero no le dí importancia hasta hoy... vaya que me hizo pasar un mal rato pero felizmente todo tiene su truco.
Dicho por: Carla | Mayo 13, 2004 01:25 AM
Aunque tenga tiempo ese post solo quiero decirte q mires la validacion de tu web cuando al estes haciendo, sino luego te sorprenderan errores al visualizarla.
http://validator.w3.org/check?uri=http%3A%2F%2Fc3.openstyles.com%2F&charset=iso-8859-1&doctype=Inline
Dicho por: Mochilo | Julio 25, 2006 12:06 PM
Gracias por el dato. Lamentablemente a veces se tienen que usar trucos que no validan para mostrar ciertas cosas, aunque en este caso la cantidad monstruosa de errores de validación también se debe a que uso código bastante viejo para esto... Rediseño total? Qué flojera... ^_^
Dicho por: Carla | Julio 25, 2006 01:51 PM
Solo una duda. Cojo bastante bien lo que explicas, pero lo unico q no me encaja es lo del tamaño de la caja contenedora.
Tamaño - padding = 680px??
Saludos
Dicho por: MiTaGo | Octubre 22, 2007 08:58 AM
me equivoque en la duda, lo siento...
tamaño (600) - padding (20) = 560px?
Saludos, disculpa las molestias
Dicho por: MiTaGo | Octubre 22, 2007 09:01 AM
si, es que el padding se aplica a ambos lados (de hecho a todos lados si no se especifica).
Entonces:
tamaño(600)-padding izq(20px)-padding der(20px)=560px
Dicho por: canastendo | Noviembre 20, 2007 11:06 PM
Hola muchachos, me ha tocado tener que disenar este site web pero como veran, si lo ven en iE y en Explorer la capa contenedora del menu se desfaza, por que pasa esto?. en mozilla se ve como yo lo quiero ver, pero en explorer no, alguna ayuda que me puedan dar?. Un millon de gracias.
Dicho por: Gonzalo | Febrero 23, 2008 03:56 PM
Creo que viendo bien el problema de interpretacion de tamaños de divs el IE siempre le agrega 4 o 5 puixeles más por lo que cuando quieres subdividir una div en dos columnas o o si incluten una div dentro de otra siempre habra problemas de concordancia... No hay otra manera de corregir este problema. Puede ser que se use javascript para esto?
Muchas gracias
Dicho por: Alberto | Mayo 13, 2009 06:25 PM
Solo agreguen..
Dicho por: Diane Waldorf | Julio 5, 2010 04:01 PM