12 octubre 2006

Caprichosa altura default del Internet Explorer

El conocido y masivamente utilizado Internet Explorer (IE), alias: la pesadilla del webmaster (joke by ShaQ), entre otros, tiene un problema que muchos de los programadores de sitios web sufrimos: la altura default de las líneas (DIV, TR/TD, P, etc).

Como podrá entenderse, este post es para experimentados o desarrolladores web, así que no se quemen la cabeza si no se dedican a esto (o piensen dedicarse), seguramente su médico amigo no se los recomendará.

El problema de “la altura default del IE” yo lo he sufrido desde hace años y luego de algunas búsquedas descargadas de éxito, utilicé algún artilugio como para que el diseño no quede “tan feo” en el IE y así patear la pelota. Hoy Shaq me consultó por esto, dado que anda renegando desde hace unos días y tampoco había encontrado la solución.

Como tantas veces hemos convenido con Shaq y otros amigos: no encontrar algo en internet, no significa que no exista, muy probablemente requiera algo más de inspiración, quizás un ducha de por medio, y cambiar los parámetros de búsqueda en Google para dar con la página exacta. Como buenos usuarios de Google, lo hemos comprobado montones de veces. Eh aquí que se me ocurrió buscar: ie div height. El primer resultado ya tenía olor a éxito y así fue como encontramos la solución al problema... claro, como solemos decir con Shaq y tantos otros amigos: en internet casi siempre existe alguien que ya le pasó lo mismo.

En fin, la soluciones planteadas por un señor llamado Bruno para el caso de un DIV, fueron:
- Escribir un comentario vacío, por ejemplo: <div style="height: 4px"><!-- --></div>
- Escribir un &nbsp; y dar el estilo “font-size: 1px; line-height: 0”, por ejemplo: <div style=”font-size: 4px; line-height: 0”>&nbsp;</div>

Ambas soluciones me funcionaron perfectamente, pero me parecen muy ridículas, tan ridículas como el capricho de IE para hacer valer su altura default en todos los casos, pero vaya uno a saber en qué estuvieron pensando los programadores de Microsoft.

8 comentarios:

ShaQ CousteaU dijo...

Muy buen post jajaja. No, ahora aportando un agregado, en mi caso el div se generaba dinámicamente por javascript haciendo un:

document.createElement('div').

Probé de usar el innerHTML para setearle el comentario dentro pero no me funcionó. Sin embargo lo terminé solucionando haciendo:

my_div.fontSize = '1';

Salud.

Anónimo dijo...

Qué suerte que la programación es una ciencia exacta, ¿no?

saludetes
f

Anónimo dijo...

Muchas Gracias, tu post me he salvado .....

Anónimo dijo...

Buen post, gracias por la ayuda.

Anónimo dijo...

Justo lo que andaba buscando... ¡gracias!

Anónimo dijo...

Este problema tambien se puede solucionar dandole al div un estilo:

overflow: hidden;

Con esto ya funciona cualquier altura minima que le querais poner a un div.

Saludossss

Sergio dijo...

No conocía la solución del comentario anterior. Funcionó perfecto y me pareció prolija. Muchas gracias.

Anónimo dijo...

Muchisimas gracias! para detallar más este comentario:
---------------------------------Este problema tambien se puede solucionar dandole al div un estilo:
overflow: hidden;
Con esto ya funciona cualquier altura minima que le querais poner a un div.
Saludossss
08/05/2008 08:39:00
---------------------------------

Es necesario poner si el DIV no tiene contenido,porque sino en Explorer te deja un alto. En firefox funciona perfecto.

Al menos en mi caso así es. ;-)

Un saludo a tod@s!