Min- und Max-width auch für den IE

Wer ein fluides Seitenlayout verwirklichen möchte, wird vermutlich früher oder später vor dem Problem stehen, dass der IE (Versionen < 7) kein min-width und auch kein max-width versteht. Dieses Problem hindert viele Webdesigner daran ein fluides Layout umzusetzen, da Textzeilen bei großen Monitorauflösungen aufgrund ihrer Länge sehr schwer lesbar sind - genauso im umgekehrten Fall.

Das CSS für gute Browser

Für alle guten Browser - außer den IE - können wir wie vorgesehen die Eigenschaften min-width und max-width benutzen:

#container{
	min-width:500px;
	max-width:750px}

In diesem Fall wird der äußere Div mit der id „container“ nie eine Breite einnehmen, die 750px überschreitet oder 500px unterschreitet.

Expression: proprietäre Eigenschaft des IE

Der IE bekommt nun eine Eigenschaft für die Mindestbreite vorgesetzt, die nur er versteht. Sie ist nicht standardkonform und somit auch nicht valide (gültig).

#container{
	width:expression
		(document.body.clientWidth 
		< 500? "500px": "auto")}

Diese Expression gibt an, dass der container-div eine Mindestbreite von 500px einnehmen soll, sobald die Breite des Browserfensters kleiner ist als 500px. Ansonsten soll die Breite den Wert „auto“ annehmen – in diesem Fall 100% des Anzeigebereichs des Browserfensters, wenn kein Außenabstand angegeben wurde.

Jetzt haben wir also die Mindestbreite des divs angegeben, fehlt noch die maximale Breite bei sehr großem Anzeigebereich.

Hierfür erweitern wir einfach die Expression um einen weiteren Ausdruck:

#container{
	width:expression
		(document.body.clientWidth 
		< 500? "500px": "auto" 
		&& 
		document.body.clientWidth 
		> 750? "750px": "auto")}

Dieser Ausdruck besagt, dass der div bei einem Anzeigenbereich von über 750px selbst nicht breiter als 750px werden soll. Ansonsten soll die Breite ebenfalls den Wert „auto“ annehmen.

Die Angaben können natürlich um die CSS-Eigenschaften „min-height„ und „max-height“ erweitert werden.

Conditional Comments: eine weitere proprietäre Eigenschaft des IE

Wie vorher schon angesprochen sind die IE Expressions nicht valide und werden somit vom W3C Validator als Fehler bemängelt. Um dies zu umgehen bedienen wir uns der Conditional Comments, um das CSS nur für den IE sichtbar zu machen.

<!--[if gte IE 5]>
<style type="text/css">
#container {
	width:expression
		(document.body.clientWidth 
		< 500? "500px": "auto" 
		&& 
		document.body.clientWidth 
		> 750? "750px": "auto")}
</style>
<![endif]-->

Diese Anweisung gehört in den head-Bereich des HTML-Dokuments. „if gte IE 5” besagt, dass der IE5 oder höhere Versionen den folgenden Code berücksichtigen sollen. Eine andere Möglichkeit wäre dem IE innerhalb der Conditional Comments ein alternatives externes CSS anzubieten, dass die IE-spezifischen CSS-Angaben enthält. Weitere Infos zu Conditional Comments gibt es unter anderem bei css4you.

Weitere Voraussetzungen

Der IE muß die Seiten im Quirksmode lesen

Ist dies nicht der Fall, tendiert der IE 6 zu Abstürzen. ;) Der IE 5 befindet sich sowieso „von Natur aus“ im Quirksmode (wenn ich falsch liegen sollte, berichtigt mich). Den IE 6 schickt ihr in den Quirksmode, indem ihr im Falle eines XHTML-Dokumentes vor den Doctype den XML-Prolog schreibt (<?xml version="1.0" encoding="utf-8"?>). Andere Möglichkeiten wären z.B. den Doctype ganz wegzulassen oder einen alten Doctype zu benutzen, was aber nicht zu empfehlen ist. Wer seine Internetseiten sowieso auch für den IE 5 optimiert, dürfte also kein Problem damit haben, da in diesem Falle die Extraanweisungen gleichermaßen für den IE 6 benutzt werden können.

Wichtiger Nachtrag: Andreas Deuschlinger hat mich darauf hingewiesen, dass es mit dem IE auch im Standardsmode klappt, wenn die beiden Zahlenwerte in der Expression nicht gleich sind. Getetstet habe ich es noch nicht, aber es wird schon stimmen. Mit folgendem Beispiel ginge es also auch ohne Quirksmode:

#container{
	width:expression
		(document.body.clientWidth 
		< 501? "500px": "auto" 
		&& 
		document.body.clientWidth 
		> 751? "750px": "auto")}

Javscript muß aktiviert sein

Wie ihr vielleicht schon bemerkt habt, beruht die expression-Angabe auf Javascript, weshalb im IE Javascript aktiviert sein muß, damit sie funktioniert. In mir bekannten Statistiken haben zwei bis drei Prozent der Seitenbesucher Javascript deaktiviert. Wenn man nun noch die ca. 20%-40% der Besucher abzieht, die nicht den IE benutzen, bleiben noch ca. 1-2% Seitenbesucher, bei denen die Angaben für „min- und max-width“ nicht greifen.

Browser, die weder das Eine noch das Andere verstehen

Ältere Browserversionen wie z.B. Netscape 4, IE’s älter als Version 5 und der IE Mac werden keine der Anweisungen verstehen, der Text wird jedoch lesbar bleiben. Ich persönlich schließe sowieso alle älteren Browserversionen außer den IE Mac vom CSS aus, so dass nur noch die reine HTML-Version erscheint.

Der Safari versteht die regulären Angaben nicht bei positionierten Elementen.

Die IE Expression-Methode kann auch mit relativen Einheiten (% oder em) benutzt werden. Sie ist aber etwas umfangreicher und die Erklärung dazu werde ich eventuell demnächst abliefern. Habt ihr Feedback und/oder Verbesserungsvorschläge, freue ich mich natürlich über eine e-Mail an nele@april-design.de oder benutzt das Kontaktformular auf meiner Seite.