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)

Ich hatte die meisten der Bilder in den Posts auf die Breite des Eintrages optimiert, also etwa 650 Pixel. Diese sind natürlich für das neue Design viel zu breit. Daher habe ich per CSS die Anweisung vergeben, dass alle Bilder innerhalb des Eintrages eine maximale Breite von 420 Pixel (zuzüglich Padding und Rändern) haben.

.entry img {max-width: 420px;}

Ähnlich verhielt es sich mit nach links oder rechts gefloateten Bildern, die im alten Design ebenfalls größer waren und jetzt das Design sprengen würden.

img.left, img.right {max-width: 200px;}

Bis ich also die Bilder auf ihre neue Größe verkleinert und wieder auf den Server geladen habe, bietet mir das CSS einen kleinen Schutz vor einem zerhackten Design. Da max-width aber nicht im Internet Explorer funktioniert, sieht es dort leider noch problematisch aus.

Doch da hilft die IE-spezifische Eigenschaft expression(). Microsoft nennt diese Eigeneschaften Dynamic Properties und ich habe ihre Funktionen nicht einmal angekratzt. Dieser Code in der CSS verkleinert auch die Bilder im IE:

.entry img {width:expression(420 + "px");}
img.left, img.right {width:expression(200 + "px");}

Mehr Informationen zu diesem kleinen “Hack”, der keiner ist, da er reguläre Eigenschaften des Internet Explorers nutzt, bekommt ihr bei Svend Tofte, der sich außerdem mit Bedingungen für solche Verhaltensweisen auseinandersetzt, max-width in Internet Explorer, und webmaster-pro.de, Über die expression-Eigenschaft für den IE.

Trotzdem wird mit expression() das max-width-Verhalten nur nachgeahmt und auch das CSS ist nicht mehr valide. Für kleine Übergangslösungen ist es aber sehr praktisch.