min- und max-width mit expression() für IE 12. März 2007 um 20:54 Uhr / Webdesign

Eingestellt am 12. März 2007 um 20:54 Uhr » Webdesign

Heute stand ich vor der Aufgabe unserem geliebten Internet Explorer <= 6 eine Minimal und Maximalbreite für die Seite an der ich gearbeitet habe zu verpassen. Das Design ist flüssig und passt sich dem Viewport an.

Alle neueren Browser lassen sich leicht mit min- und max-width zufriedenstellen, erfreulicherweise auch der IE7. Doch der IE 5.0, IE 5.5 und IE 6, kennen das nicht. Natürlich funktioniert die Seite auch ohne die Begrenzungen, nur werden die Zeilen dann unleserlich lang und es sieht nicht gut aus.

Die Lösung des Problems: ein JavaScript, angelehnt an Svend Toftes max-width in IE. Svends Lösung ist kurz, hilft aber nur bei max-width. Wenn man das Fenster verkleinert, entsteht kein horizontaler Scrollbalken um den Inhalt vernünftig darzustellen.

Ich habe das Script so erweitert, dass es auch min-width sinnvoll behandelt. Leider bin ich dabei auf ein Problem gestoßen. Der IE 6 möchte im Standard-Compilant-Mode über eine andere Methode auf clientWidth zugreifen als die anderen IEs (deshalb die doppelte Abfrage). Als Fallback für IEs ohne JavaScript ist noch eine feste Breite von 995px angegeben.

* html #foo {
 width: 995px;
 width: expression(
  (document.documentElement && document.documentElement.clientHeight) ?
   (document.documentElement.clientWidth < 755) ? "755px" : (( document.documentElement.clientWidth > 1265 ) ? "1265px" : "auto") :
   (document.body.clientWidth < 755) ? "755px" : (( document.body.clientWidth > 1265 ) ? "1265px" : "auto")
 );
}

Da ich grundsätzlich eine externe IE-Hacks-CSS-Datei benutze war der Platz dafür schnell gefunden und der * html-Hack verhindert die Ausführung im IE7.