Alto mínimos para IE6 (y el resto, claro)

5/oct/2007 23
SafariFirefoxInternet Explorer 6Internet Explorer 7Opera

Primer aporte procedente del videocast. Como prometido, este artículo será un corto pero efectivo método para obtener la propiedad min-height en todos los browsers, especialmente para IE6 que no lo aplica para nada.

Esta propiedad lo que hace es aplicar un alto mínimo a un elemento. Por ejemplo, queremos que una caja tenga un alto de 200px. Como sabemos, los elementos que estén dentro de esta caja se mostrarán hasta que alcancen esos 200 pixeles, y pasado eso si se agregan más elementos la caja no va a crecer, sino que permanecerá fija. Con min-height lo que lograremos es que el alto sea de un mínimo de 200px, y que puede crecer lo que sea necesario; al contrario de max-height, que lo que hace es dar un tope al alto de la caja (o sea, nuestro contenido puede crecer hasta un alto máximo donde la caja dejará de crecer).

Bueno, al grano. En este sitio, necesitaba una caja estuviera fija en un alto mínimo, (según el diseño), ya que si el contenido superior a éste creciera, esta caja pudiera moverse nuevamente, pero siempre y cuando alcanzara este alto mínimo.

Como se puede ver en la imagen 1, se construyó el menu lateral con un min-height de 175 pixeles. Así, la caja del banner se alineaba con un párrafo del texto del contenido (esto es sólo un ejemplo, claro. La idea original era otra.).

Imagen 1: alto mínimo

Ahora, en la imagen 2 se puede ver qué pasa si este menú tiene subitems desplegables (como en artículo de árbol de navegación, por ejemplo). Si se hubiera dado un height fijo de 175 pixeles a ese menú, lo que hubiera pasado es que la caja no hubiera crecido, y los textos se habrían pasado de largo, mientras que la caja quedaría estática. Con min-height, lo que pasa es que la caja menú se queda fija hasta que sus elementos interiores alcancen ese alto mínimo, y de ahí la caja sigue creciendo.

Imagen 2: alto mínimo

¿Divertido, no?

Pues no tanto. Como dije, IE6 no soporta esta propiedad tan útil (como tantas otras). La solución: un simple truco de CSS que involucra !important y cómo IE6 no lo interpreta como debería.

ul#menu {
     height: auto!important; /* para los browsers buenos */
     height: 175px; /* para IE5+ */
     min-height: 175px; /* para los browsers buenos */
}

La primera declaración (height: auto!important) no lo leerá IE5+ ya que no soporta !important, así que deja de leer esta línea y pasa a la segunda: height: 175px. Los otros browsers pasan en seguida a leer la tercera: min-height: 175px e IE5+ no lo interpretará, lo que hará que todos queden felices y contentos con su alto mínimo funcionando.

Ver ejemplo

No fue tan corto a fin de cuentas. Pero sí efectivo.

Comentarios

  1. fearlex [#]

    Esta excelente el tip y funciona al 100% por que lo he aplicado innumerables veces, pero yo juraria que aprendi eso aqui mismo, o sea en este mismo sitio antes, busque en mis bookmarks, y no lo encontre, aun asi, estoy seguro que fue aqui 😀

    Anyway, ahora si esta aqui

  2. CSSLab Admin [#]

    fearlex, fiel lector, efectivamente habia mostrado algo similar hace bastante tiempo (¡aaaaabajo!) pero en este caso es mas elegante, ya q no es un hack en sí, sino q lo veo más como una técnica. Salu2.

  3. links for 2007-10-06 en newdisco [#]

    […] CSSLab » Alto mínimos para IE6 (y el resto, claro) Como hacer que la propiedad CSS min-height funcione en IE6 (tags: css hack howto ie6) […]

  4. Victor San Martin [#]

    Sin duda un muy buen tip y siempre dejando de lado la idea de ocupar hacks, lo probé y funciona de lujo.

    Saludos

  5. jervert [#]

    También valdría (aunque con hack CSS):

    ul#menu {min-height:175px;} /*Para los navegadores de verdad e IE7*/
    * html ul#menu {height:175px;} /*Para IE5+*/

  6. Mónica [#]

    Hola, veo que siempre pruebas las cosas en distintos navegadores, pero recientemente me he encontrado con un caso “expediente X” en la pagina en la que estoy trabajando y es que en la misma versión de IE6 en distintos equipos con el mismo sitema operativo (windows XP) la maquetación se va a tomar viento….sabes por qué puede ser esto? te ha pasado alguna vez?
    Si me puedes ayudar te lo agradecería eternamente.

    Saludos!

  7. CSSLab Admin [#]

    Monica, si eso te ocurre es q no esta muy bien construido, lo q pienso es q puede q este desordenado, o no hayas cerrado bien algunaetiqueta. te recomendo comenzar de 0 la construccion. puede tomar mas tiempo pero podras controlar mejor el layout. suerte.

  8. maria [#]

    Gracias. Buen resultado

  9. » Íconos para mejor usabilidad | CSSLab [#]

    […] a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar […]

  10. nwSnake [#]

    Antes que nada felicitarte por el artículo ya que ya llevo un buen rato tratando de solucionar ese problema entre IE y FireFox y mira que en IE ya funciona!
    Definitivamente vas a mi lista de favoritos

    d(n_n)

    ~C ya!

  11. alejandro [#]

    Exelente!

  12. Victor [#]

    Exelente, elegante tip.

    Saludos!

  13. Fernando [#]

    tengo un problema con un menu desplegable. En IE7 se ve bien, y firefox (obviamente) se ve bien, pero en el IE6 no se ve la parte desplegable. Dejo el link para que lo chequeen y si alguin sabe por que o como corregirlo se los agradezco, el cliente tiene el 6 y no hay caso, tiene razon, para sus clietnes es el standar.

    http://74.53.160.50/$sitepreview/wernerbernheim.com.uy/index.html

    Saluldos y gracias de antemano

  14. Hacks CSS « ddsign [#]

    […] muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Alto mínimos para IE6 (y el resto, claro) IE6 no soporta la propiedad min-height para definir un alto mínimo para un contenedor, pero se […]

  15. Franco [#]

    Excelente! Estaba desde ayer dandome vueltas con esto en la cabeza y antuvo GENIAL! Gracias

  16. .dan [#]

    Gracias!!! Ando peleando con un holy grail compatible con IE6 y la única manera que se me ocurría de bajar el footer (cuando los laterales son más altos que el centro) era con min-height

  17. avanzaweb [#]

    un buen tip

  18. José Carlos [#]

    Estupendo, funciona perfectamente. Desde luego las propiedades min-… deberían ser un estándar porque son realmente útiles!!

  19. Víctor [#]

    Gracias, a patadas! jeje. me tenía loco este tema y es que como todos los web designer saben la oveja negra de los navegadores es el puñetero IE que nos tiene en un continuo dolor de cabeza el tener que reinventar el código para nuestras web. Fuckin’ Bill puertas. jaja

  20. Juan Carlos Iñaguazo [#]

    Muy bueno pero que hay si el documento está en quirks mode, ???

  21. Fernando [#]

    Hoy llegué a la conclusión que en versiones de <= IE7 el min-height: no puede ser menor al tamaño de la fuente que puede llegar a contener. Quiero decir que si el div tiene un min-height: 7px y el font-size:10px este será de 10px aunque esté vacio. Para min-height muy pequeños, todavia no encontré solución.
    Igual, muy buen post.

  22. goodmrn [#]

    Muchas gracias por este tip! me salvaste, estoy haciendo un sitio responsive y al momento de entrar desde ie6 se ve un desorden total pero con esto ya lo puedo dejar fijo aunque no responsive pero al menos los que entren desde ie6 lo podran ver sin que se les descuadre todo.

Responder a nwSnake ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab