Archives for : February2007

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.