min- und max-width mit expression() für IE 12. March 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.
Pingbacks
- Quirksmode nur bei xhtml? - CSS @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe
- TP: [Layout] Elastisch/fluides layout : wrapper umschließt nicht richtig - TP Hilfe Forum -- Anleitung - Tutorial - Workshop...
- HTML/CSS Problem mit floating und 100% - Seite 2 - php.de
Kommentare
Die Kommentare sind für diesen Eintrag geschlossen.
Dirk Jesse aus Dresden schrieb am 13.03.2007
Jeena Paradies aus Varberg schrieb am 13.03.2007
Ja Dirk, das war auch das Problem was ich erwähnte, er hat sich dann immer in einer Art Schleife aufgehängt und man musste ihn komplett töten.
Scream schrieb am 16.03.2007
Ich hatte den Hack früher auch aber er hat viele Probleme. Schaut mal ob der besser geht:
http://www.dustindiaz.com/min-height-fast-hack
Mit diesem bin ich 100% zufrieden :D
Jeena Paradies aus Varberg schrieb am 17.03.2007
Das hilft doch überhaupt nicht beim min- max-Problem der Breite.