Seiten über gutes Webdesign, Usability (Benutzbarkeit) und Accessibility (Zugänglichkeit) mit HTML und CSS.
Navigation überspringen

max-width Workaround für Internet Explorer (IE)

Leider beherrscht keine Internet Explorer-Version bis 6.x die Eigenschaft max-width. Insbesondere wo die Auflösung der Monitore kontinuierlich wächst, wäre diese durchaus nützlich.

Glücklicherweise setzt der IE aber dafür Tabellen etwas seltsam. Dies bietet die Möglichkeit, auch diesem Programm ein Verhalten, das der Eigenschaft max-width entspricht, beizubringen. Hierzu wird eine einzellige Tabelle verwendet, der die als max-width gewünschte Breite als Breite der Tabellenzelle td vorgeschrieben wird.

Der IE ignoriert die Breitenangabe einer Tabellenzelle solange diese größer ist, als die im Fenster zur Verfügung stehende Breite.

Damit nicht andere Browser von diesem Workaround gestört werden (die sich an die Breitenangabe halten), wird diese Tabelle in bedingte Kommentare (contitional comments) gepackt.

<div style="max-width:30em">
<!--[if IE]><table><tr><td style="width: 30em"><![endif]-->

<p>Hier kann jetzt ganz viel
Text stehen.</p>

<!--[if IE]></td></tr></table><![endif]-->
</div>

Dieses Vorgehen funktioniert allerdings nur solange, wie innerhalb dieser maxwidth-Tabelle keine weiteren Tabellen auftauchen. Ein weitere Nachteil ist der, den alle Tabellen haben: Sie werden erst angezeigt, wenn ihr Inhalt vollständig geladen wurde. Wenn hiermit also die Breite einer ganzen Seite beschränkt werden soll, kann es vorkommen, dass der Besucher der Seite längere Zeit vor einem leeren Bildschirm sitzt.

Daher kann es nützlich sein, hierfür einen weiteren Workaround zu verwenden: man nimmt nicht eine maxwidth-Tabelle sonderen mehrere. So wird der Anfang des Dokuments wieder schneller aufgebaut und man kann auch das Problem mit Tabellen auf der Seite umgehen. Allerdings wird das Dokument damit auch nicht einfacher und kürzer.

Urheber © Dr. Joachim Wiesemann

Letzte Aktualisierung: 27.5.2006