maximum en minimum breedte en hoogte in Internet Explorer

Bij een website kan het erg handig zijn om minimale en maximale hoogten en breedtes in te stellen. Hiervoor is met behulp van CSS een gemakkelijke mogelijkheid namelijk min-width, min-height, max-width en max-height. Maar Internet Explorer zou Internet Explorer niet zijn mocht dat niet werken. Dus moet je oplossingen zoeken die het wel doen. En laat deze er nu zijn. IE ondersteunt namelijk zijn eigen ‘expression’ attribuut.

Met dit attribuut kun je ervoor zorgen dat er wel maximale of minimale eisen aan de breedte of lengte worden gesteld. Dit werkt als JavaScript staat ingesteld. Je schrijft dan de volgende code:

div {
width: expression(333 + "px");
}

Bovenstaande is gelijk aan

div {
width: 333px;
}

Nadeel van de expression functie is dat deze niet werkt als JavaScript is uitgeschakeld. Niettemin is het gebruiken van max/min-width/height een belangrijk onderdeel voor de webdeveloper. Hier zijn nog een aantal voorbeelden voor Internet Explorer waarin height en width wordt toegepast.

max-width in IE

Deze methode werkt in IE6 en zou ook moeten werken in IE5. Pas de waarden aan naar je eigen wensen. In de code staat enige toelichting. In dit voorbeeld zetten we de maximum breedte op 555px.

* html div#division {
width: expression( document.body.clientWidth > 554 ? "555px" : "auto" ); /* maximumbreedte voor IE */
max-width: 555px; /* max-width voor standaard browsers */
}

In het volgende voorbeeld zetten we de maximumbreedte op 33em.

* html div#division {
width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" );
max-width: 33em;
}

min-width in IE

De volgende methode werkt in IE6, en zou ook moeten werken in IE5. Ook hier kun je de waarden weer naar wens aanpassen.
In dit voorbeeld zetten we de minimumbreedte op 333px.

* html div#division {
width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* min-width voor IE */
min-width: 333px; /* min-width voor alle overige standaard browsers */
}

max-height in IE

In het volgende voorbeeld, wederom geschikt voor IE6 en IE5, zetten we de maximum hoogte op 333px.

* html div#division {
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* max-height voor IE */
max-height: 333px;
}

min-height in IE

Tenslotte de minimum hoogte voor de verschillende browsers, ingesteld op 333px.

* html div#division {
height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* min-height voor IE */
min-height: 333px;
}