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

PfeileUm 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

Verwandte Beiträge

Kommentare & Trackbacks

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

    Gravatar von 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. [...]

  2. Kommentar von Chris:

    Gravatar 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

  3. Kommentar von Cts:

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

  4. Pingback: min-width im IE6 - XHTMLforum:

    Gravatar von 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 [...]

  5. Kommentar von Geroz:

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

  6. Kommentar von tom:

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

Kommentar schreiben

* Pflichtfelder


all-inkl.com webhosting