ervdesign.net

Seamos justos

Cuando terminé de publicar la anterior parte de El dichoso modelo de caja, me pregunté si podría haber sido algo más justo con IE, y la verdad es que sí.

Siendo justos y sobre todo precisos, el modelo de caja, falla en las versiones antiguas de IE. La primera versión que implementa correctamente el modelo de caja, es la versión 6, pero sólo en los casos en los que declaramos el tipo de documento, el DOCTYPE.

Una vez hecha esta aclaración, vamos a continuar por donde lo dejamos. Vamos a ver dos gráficos en los que se muestra muy a las claras, el problema de IE para mostrar correctamente la caja:

Primero veamos como se implementa la caja correctamente


Y ahora veamos lo que nos hace IE

Uff! que lio. Nada más lejos de la realidad. En el primer caso, tenemos un contenido, al cual le damos un width de 400px, más 20 del pading, (10+10), más 20 del border, (10 + 10) y más 20 del margin, nos da un total de caja de 460px. Todo correcto hasta el momento.

En el segundo caso, el que nos interesa solucionar, tenemos un contenido al que le damos un width de 400px. Como IE implementa el padding y el border dentro del width declarado, a esos 400px tendríamos que restarle 40px, 20 del padding, (-10 -10), y 20 del border, (-10 -10), con lo que nuestro contenido, ha quedado reducido a 360px, y de tamaño total de caja tendríamos 420px, que son los 400 que declaramos más 20 del margin, (10 +10), más claro, ¿no?

Con este problema, no era de extrañar que los diseñadores (cuando los navegadores pasaban de implementar estándares) de antes de los estándares, recurrieran a las tablas, para asegurar sus diseños, pero afortunadamente, eso ha cambiado.

El hack

Un hack, aprovecha el error de análisis de la implementación de un navegador, para mostrar u ocultar el CSS en él mismo. Esto, evidentemente, es una ventaja, ya que sólo el navegador en cuestión lee e implementa los datos, mientras que los que implementan bien el modelo de caja, lo dejan pasar como un error. Pero mejor vamos a verlo:

* {
  margin: 0;
  padding: 0;
}

div {
  border: 10px solid red;
  padding: 10px;
  margin: 10px;
  width: 400px !important;
  width /**/:440px;
}

Espero que no parezca demasiado confuso, por que no lo es. Concretamente, el hack que hemos utilizado en esta ocasión, está sacado de CSS Discuss, una gran web, dedicada al estudio y discusión de temas relacionados con nuestra querida CSS. Concretamente hemos utilizado la tercera técnica, (Technique 3). Concretamente, la línea 5 contiene la información para todos los navegadores. Nuestro amigo IE, no implementa la regla !important, pero esto no nos importa, es más, nos favorece. La siguiente línea, la 6, se oculta a IE6, por lo IE5.x y todo navegador que no implemente correctamente la regla !important, conseguirán los 440px para igualar al modelo de caja oficial.

Todo esto puede sonar muy solemne, pero lo mejor es ver como funciona:

Comparación entre Firefox 1.5 e IE6

Podéis ver como las cajas por fin parecen iguales. Este enlace Este enlace os puede servir para comparar en diversos navegadores, aunque eso sí, la teoría o ciencia de los hacks, no es para nada exacta, y nos toparemos con problemas, que por h o por b, nos compliquen la vida y la existencia. El diseñador es inherente a los problemas, y que curioso, que casi todos están relacionados con IE.

Escucha
este post

Etiquetado como: caja, CSS, estándares web, modelo, XHTML

Artículos relacionados

• El dichoso modelo de caja (2)
• No más medallitis por favor (3)
• MRI: testea tus selectores (0)
• Menú con lista más css con efecto :hover (4)
• Los lectores de pantalla y el display: none (0)