max-height in IE5+

Exista tot felul de proprietati si functionalitati CSS si nu numai, extrem de utile uneori, frumos implementate in FF dar deloc sau prost implementate in batranul (a se citi “decrepitul”) IE:

PNG-uri cu transparenta, transparente pur si simplu, scriere pe mai multe coloane, latimi si inaltimi minime si maxime etc.

Azi ma opresc la cele din urma, latimile si inaltimile maxime / minime.

In FF exista, foarte simplu, proprietati CSS pentru asta: max-width, min-height etc. In IE? uhhhh… nada.

Mare (?) noroc ca, de la IE 5.0 in sus, a fost implementata o chestie noua: suportul pentru expresii in CSS. Evident, nici un alt browser nu le “intelege”, si nici macar nu sunt un standard universal, asa ca expresiile astea dragute nu trec de validarile clasice. Dar, pentru cine e dispus sa renunte la validari, iata cum pot obtine un max-height de pilda, functional si in IE si in FF:

.class {
overflow:auto;
max-height: 100px;
*height:expression((this.scrollHeight > 75) ? “100px” : “auto” );
}

Observi ca am definit intai max-height in asa fel incat sa-l inteleaga FF-ul, dupa care am folosit un hack-ul cu “*” (un browser senil ca IE trece peste steluta aia, nu se incurca in ea, chiar daca ar putea fi o potentiala eroare… un browser sanatos la cap ignora complet acea definitie. In felul asta, se pot face uneori distinctii in definirea unor proprietati, de la browser la browser).

Restul se cam explica de la sine… E o expresie conditionala clasica de la care poti extrapola, daca vrei sa o adaptezi nevoilor tale.

Nota: nu recomand folosirea expresiilor. Doar IE le “vede”, restul browserelor nu. Dar, cum ATATA lume se plange de min-width si de altele asemenea lui, m-am gandit sa-i ajut un pic cu acest mic hack.

Comments are closed.

Comments (6)

  1. Madko

    am si io o intrebare… nu aveam unde sa o pun ..asa k am sa o fac aici….DE CE NU VA MERG LINKURIE PE SITE?

    am urmat acest link http://hbfx.com/works/Web-design.html …si surpriza….”The page cannot be found” ..avetzi probleme cu hostu?… sau pur si simplu .. u don’t giva a shit about the site?

    nu vreau sa ma dau mare si rotund (desii am ceva kile in plus 😛 ) nu fac asta k repros ci ca observatzie.. am vazut k angajatzi .. dar..nu pra facetzi mare impresie “junior developer-ului” pe care’l doritzi

    scuze daca v’am deranjat

  2. Salut, Madko,

    Nu esti primul care imi spune de treaba asta. Eroarea sta in faptul ca tu ai tastat http://hbfx.com si nu http://www.hbfx.com (remarca subdomeniul www).

    Intrebarea mea este: unde ai gasit eroarea asta? Ca s-o corectez…

    P.S. iti multumesc pentru atentionare… si astept sa ma ajuti s-o corectez 🙂

  3. […] de element se poate folosi oricand combinatia impreuna a urmatoarelor trei proprietati css: 1. max-width pentru a limita latimea butonului la maximul impus aici; 2. white-space: nowrap; pentru a preveni […]

  4. […] Scriam mai demult despre cum sa rezolvi aceasta problema spinoasa a dimensiunilor minime sau maxime in unele browsere mai retarde. […]

  5. […] I wrote, some time ago, about how to solve this problem with min or max dimensions in more retarder browsers. […]

  6. […] a button from expanding more than desired, you can always combine these 3 CSS tricks combined:: 1. max-width to limit the button to whatever width you need to limit it to; 2. white-space: nowrap; to prevent […]