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

3 Kommentare

  1. Danke für den Tipp.
    Lustig, dass ich auch gerade an einem Design von 90% und min und height sitze. Aber ich werde beim IE lieber eine fixe Breite eingeben und komme ohne Javascript und vor allem ohne den Quirks-Modus aus.

  2. vielen dank fürs niederschreiben, wußte gar nix von expression(). mit dem quirks könnt ich leben… mal sehen obs zum einsatz kommt, werkel nämlich auch an nem flex-design für meine seite (und sei es um den IE abschmieren zu lassen ;-D ).

  3. Pingback: Gefangen im Netz | Der Webdesign und Entwicklungs Podcast » Blog Archiv » Folge 2: Fluide Websites

Kommentare sind geschlossen.