IE6 min-width/max-width Hack von Cameron Moll

Um ein fluides Layout realisieren zu können, bei dem sich die Breite der Internetseite immer dem Browserfenster anpasst, dabei aber trotzdem eine minimale und maximale Breite angeben zu können, gibt es in CSS die Eigenschaften min-width und max-width.

Leider unterstützt der Internet Explorer diese CSS-Eigenschaften nicht.

Cameron Moll stellt auf seiner Website einen in seinem Buch CSS-Mastery beschriebenen Weg vor, dem Internet Explorer trotzdem ein ähnliches Verhalten beizubringen, und zwar mit Hilfe von JavaScript-Expressions.

Im CSS muss dafür folgendes notiert werden:

#container, #footer {
 width: expression(document.body.clientWidth < 742 ? "740px"
 : document.body.clientWidth > 1202 ? "1200px" : "auto");
}

Per JavaScript wird hier für die Ebenenen #container und #footer die Breite des Browserfensters abgefragt.
Ist es schmaler als 742px, so wird die Breite der Ebene auf 740px gesetzt und damit die min-width definiert.
Ist das Browserfenster breiter als 1202 px, wird die Breite der Ebene auf 1200px gesetzt und damit die max-width definiert.

Bei der Verwendung dieses Codes ist darauf zu achten, dass die abgefragte Breite nicht mit der später festzusetzenden maximalen bzw. minimalen Breite gleich sein darf.

Eine Angabe in der Form:

document.body.clientWidth < 740 ? "740px"

erzeugt einen Absturz des Internet Explorers, sobald man versucht, die Fenstergröße zu ändern.

Deshalb immer einen kleinen Unterschied zwischen den Vergleichszahlen lassen:

document.body.clientWidth < 745 ? "740px"

Auf dieser Seite von Cameron Moll kann man den eingebundenen Code in Aktion sehen »
Hier und hier findet sich die Diskussion der vorgestellten Lösung.

Verwandte Beiträge

• CSS-Schiebetürnavigation
• IE verdoppelt margin eines Floats in float-Richtung - was man dagegen tun kann
• CSS Love Child
• CSS - Geheimnisse gelüftet
• Flexible CSS-Layouts
• IE6 min-width/max-width Hack von Cameron Moll
• Firefox CSS-Viewer: Blick hinter die Kulissen

Dienstag, 18. April 2006 21:17 Uhr in CSS 2 Kommentare
Kommentar-Abo kommentieren | TrackBack-URI