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

5/Oct/2007 332
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. app.gumroad.com [#]

    This website truly has all of the information and facts I
    needed about this subject and didn’t know
    who to ask. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  2. stromectol [#]

    ivermectin humans Alto minimos para IE6 (y el resto, claro) | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin where to find

  3. Robertalava [#]

    costco cialis cialis discounts – generic cialis 7days

  4. newport-beach-wolf-repair.com [#]

    High quality supplements help you build the body of your dreams.
    If you wish nothing but the best for your silhouette and health, be sure to get steroids from the Balkan pharmaceuticals.
    Balkan Pharmaceuticals is one of the largest manufacturers of
    quality goods. In our store, there are only original items obtained directly from the industry.

    Popular Supplements: Steroids, Fat-Burners, Post-Cycle Therapy (PCT), Combined Course and others.

    newport-beach-wolf-repair.com
    Repairing an air conditioner is not the easiest thing to do.

    https://pasadenasubzerorepair.com https://best-wolf-appliance-repair.com

  5. belgium gay dating soft [#]

    gay dating site advice https://gayedating.com/

  6. gay plenty of fish dating site [#]

    gay sm dating https://gaydatingcanada.com/

  7. 34 dating a 19 year old gay [#]

    older gay men dating sites https://dating-gaym.com/

  8. 1% free gay dating sites [#]

    browse gay men dating free https://datinggayservices.com/

  9. an quest bars [#]

    Hello there! I know this is kinda off topic but I was wondering if you
    knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot! quest bars http://bitly.com/3C2tkMR quest bars

  10. of cheap flights [#]

    If some one wants expert view on the topic of blogging and
    site-building then i advise him/her to visit this blog, Keep up the nice work.

    cheap flights http://1704milesapart.tumblr.com/ cheap flights

  11. with quest bars [#]

    I just like the helpful info you provide on your articles.

    I’ll bookmark your blog and test once more right here frequently.
    I am fairly sure I’ll be informed many new stuff proper here!
    Best of luck for the next! quest bars http://bit.ly/3C2tkMR quest bars

  12. RichardMus [#]

    http://ivermectincovi.com/# ivermectin 5 mg
    ivermectin brand name

  13. www.iherb.com [#]

    My brother suggested I might like this web site.
    He was entirely right. This post truly made my day. You can not imagine simply
    how a lot time I had spent for this info! Thank you!
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  14. j.mp [#]

    Wonderful article! This is the type of information that are meant to be shared around the net.
    Shame on the search engines for no longer positioning this put up upper!

    Come on over and seek advice from my website . Thanks =)
    ps4 games https://j.mp/3z5HwTp ps4 games

  15. RichardMus [#]

    https://ivermectincovi.com/# ivermectin 1% cream generic
    cost of ivermectin

  16. HenryUnfiP [#]

    surge gay dating promo codes
    gay dating 19
    alex cliffe gay dating uk

  17. tinyurl.com [#]

    We are a gaggle of volunteers and opening a brand new scheme in our community.
    Your web site offered us with valuable information to work on. You have done an impressive job and our entire neighborhood might be thankful to you.

    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  18. j.mp [#]

    Heya fantastic blog! Does running a blog similar to this
    take a lot of work? I have virtually no understanding of coding but I was hoping to start my own blog in the near future.
    Anyway, if you have any suggestions or techniques for new blog owners please share.
    I understand this is off topic nevertheless I simply needed to ask.

    Thanks a lot! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  19. bit.ly [#]

    Simply want to say your article is as surprising. The clearness in your
    post is simply great and i can assume you are an expert on this subject.
    Well with your permission let me to grab your RSS
    feed to keep updated with forthcoming post. Thanks a million and please carry on the
    rewarding work. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  20. coub.com [#]

    Write more, thats all I have to say. Literally,
    it seems as though you relied on the video to make your point.
    You definitely know what youre talking about, why throw away
    your intelligence on just posting videos to your blog when you could be giving us
    something informative to read? scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  21. Lasix [#]

    cheap cialis

  22. HenryUnfiP [#]

    gay surfers dating
    safe gay dating websites
    gay dating at 46

  23. where to buy zyrtec cheap [#]

    what is cetirizine used for – https://allergyd.com

  24. stromectolforte.com [#]

    ivermectin for humans amazon http://stromectolforte.com/# buy ivermectin for humans uk ivermectin

  25. WayneRog [#]

    geneneric cialis aus when will generic cialis be available in the usa – best cialis price
    cialis discount

  26. stromectolforte.com [#]

    stromectol manufacturer https://stromectolforte.com/ ivermectin for humans for sale ivermectin

  27. WayneRog [#]

    buy cialis online usa cialis daily online – how much is cialis
    generic cialis discreet buy

  28. Anthonyslany [#]

    milwaukee generac viagra viagra blog site – whats better cialis or viagra

  29. modafinilmoa [#]

    modalert 200 reddit sunosi vs modafinil

  30. bactrim [#]

    sulfamethoxazole medication https://bactrimxazole.com/

  31. ivermecton.com [#]

    ivermectin 온라인 구매 https://www.ivermecton.com/ ivermectin cream uk

  32. Anthonyslany [#]

    viagra canadian pharmacy ezzz original viagra for sale – viagra withot a prescription

CSSLab