Markup

Tipps&Tricks: max- und min-width im IE

Und wieder einmal beschäftigte mich die Thematik max-width und IE. Da der Internet Explorer weder max-width noch min-width kennt, muss ich zur IE-eigenen, dynamischen Eigenschaft expression() greifen, über die ich bereits früher berichtet habe.

Problem

Der Container der Webseite soll 90% der verfügbaren Fensterbreite einnehmen und sich dabei zwischen den Maßen 900 und 1100 Pixeln anpassen.
Da ich den Text lesbar halten möchte und eine horizontale Navigation verwende, die etwas weniger als 900px in der Breite einnimmt, habe ich die Werte 900px und 1100px gewählt.

CSS-Anweisung:

#container {
	width: 90%;
	min-width: 900px;
	max-width: 1100px;
}

Lösung

Die Eigenschaft expression() macht sich eine Mixtur aus JavaScript und CSS zunutze, allerdings validiert das CSS nachher nicht mehr. Daher sollte man solche Anpassungen mit contitional comments versehen und in eine CSS-Datei nur für den IE schreiben:

CSS-Anweisung für den IE:

#container{
	width:expression(
	    document.body.clientWidth < 1000? "900px": "90%"
		&&
	    document.body.clientWidth > 1220? "1100px": "90%"
		);
}

Kurz erklärt: Wir fragen die Breite des Browserfensters ab. Die erste Deklaration sichert die minimale Breite des Container ab. Steht weniger Platz zur Verfügung als 1000 Pixel, wird der Container auf 900px (also 90%) begrenzt, andernfalls behalten wir die 90% bei. Ebenso können wir eine maximale Breite setzen, wenn das Fenster breiter ist als 1220px. Verbunden werden beide Anweisungen mit &&.

Jetzt stimmen die Relationen (90%) auch im IE und unser Container-DIV macht keine großen Sprünge in der Breite.

Nachteile:

  • JavaScript muss aktiviert sein
  • der IE 6 muss sich im Quirksmode befinden, da er sonst abzustürzen droht (mehr Infos zum Quirksmodus)
Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.