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

Pfeile 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.

Foto: sherlock0574 – Photocase.de

Kommentare & Trackbacks

Pingback: Min-width-Lösung für den Internet Explorer mit purem CSS - von Stu Nicholls » die Netzspielwiese:

[...] Wie schon im Artikel IE6 min-width/max-width Hack von Cameron Moll beschrieben, unterstützt der Internet Explorer die CSS-Eigenschaft min-width nicht, mit der man die minimale Breite eines Elementes angeben kann. [...]

24. August 2006 um 21:28
Kommentar von Chris:

HI.. Klasse Lösung um ungeleich große Bilder auf die richtige Breite wie alle Bilder zu bekommen.

Vielen Dank. Klappt perfekt. !!! Werde es auch in meinem Blog nach hier verlinken. !!

Gruß
Chris

16. Mai 2007 um 14:40
Kommentar von Cts:

Klasse, dass auch nach über zwei Jahren einem der Eintrag weiterhelfen kann! Danke dafür!

Und umso trauriger ist es, dass der IE6 immer noch benutzt wird.

2. Dezember 2008 um 18:04
Pingback: min-width im IE6 - XHTMLforum:

[...] unterst�tzt die Eigenschaft: min-width, max-width nicht. Das w�re wohl die einfachste Variante: IE6 min-width/max-width Hack von Cameron Moll die Netzspielwiese Andere Variante: min-width in Internet Explorer – fixed In diesem Buch: Galileo Computing : Buch [...]

3. Januar 2009 um 14:03
Kommentar von Geroz:

*vor Ehrfurcht niederknie* Ich bin unwürdig, ich bin unwürdig – ich bin Staub! :)

Krass – geniale Lösung … Und ich dachte schon, die ollen IE6er müßten mit einem zerbrechlichen Layout leben, wenn sie das Fenster zu schmal schieben.

17. März 2009 um 01:10
Kommentar von tom:

danke für diese tolle lösung
auch in 2010 wird der ie6 noch verwendet :(

achtung: der ie6 friert aber beim verkleinern des fensters ein !

die lösung hab ich in einem kommentar bereits gefunden:

“…I changed your code to use

document.documentElement.clientWidth

and resized for over a minute with no freezing, so that seems to fix the problem. Unfortunately, IE 5.5 (AFAIR) does not support document.documentElement …”

verkleinern/vergrößern des fensters ist dann mit ie6 problemlos möglich.

12. August 2010 um 09:21