min-height im Internet Explorer
| Datum: | 26.10.2007, 14:56 Uhr |
| Kategorie: | HTML, CSS und Web  |
| Kommentare: | 2, Neuen Kommentar schreiben |
Dass ich den Internet Explorer, zumindest in Versionen vor 7 nicht mag, ist für meine Arbeitskollegen kein Geheimnis und wenn man betrachtet, wie wenig sich Microsoft bei der Entwicklung dieses Browsers an geltende Standards vom W3C hält, ist dies sicherlich auch kein Wunder. An dieser Stelle aufzuzählen sind beispielsweise der 3-Pixel Fehler, die prägnante Miturheberschaft am Quirks-Mode oder die fehlerhafte Berechnung von Element-Dimensionen in Zusammenhang mit Innenabständen, von nicht implementierten CSS Attributen, wie min-width oder min-height einmal ganz abgesehen.
Im Job ist es teils eine wahre Qual, als letzten Schritt in der Umsetzung einer Webseite mit CSS Hacks (die das Stylesheet natürlich nicht valide machen) oder Conditional Comments das Layout den Fehlern des Internet Explorers anzupassen. Für alle Leidensgenossen möchte ich an dieser Stelle künftig Tipps und Kniffe beschreiben, die einem das Leben hinsichtlich dieser und anderer Probleme hoffentlich ein wenig leichter machen.
Das CSS-Attribut "min-height" beispielsweise wird vom IE leider nicht unterstützt, kann allerdings simuliert werden, möchte man auf oben angeführte CSS-Hacks oder Conditional Comments verzichten. Dies funktioniert auf einfachem Wege durch folgende Angaben im Stylesheet:
height: auto !important; /* Wird von modernen Browsern interpretiert */
height: 100%; /* Für den IE: wie min-height */
min-height: 100%; /* min-height für alle anderen Browser */
Diese Zeilen funktionieren durch eine fehlerhafte Interpretation der Angabe !important, die validen Browsern mitteilt, dass die Angabe "auto" bezüglich der Element-Höhe des Wertes "100%" vorgezogen wird, sprich, das Element soll bei übergroßem Inhalt automatisch wachsen. Obwohl das Attribut height im eigentlichen Sinne eine Höhe festlegt, lässt der IE dennoch eine dynamische Vergrößerung des Bereiches zu, sollte der Inhalt wachsen. height wird demnach vom Internet Explorer generell als min-height interpretiert. In diesem Sinne existiert die Angabe min-height sowieso nur für Browser, die CSS zumindest in dieser Hinsicht valide interpretieren, die Angabe height: auto !important setzt nur die 100%-ige Höhenangabe ausser Kraft.
An dieser Stelle sei generell noch einmal auf SelfHTML hingewiesen, denn dort lassen sich viele Attribute nachschlagen. Informationen bezüglich Conditional Comments und CSS-Hacks werden dort auch sehr gut erklärt.
Bisherige Kommentare:
| Name: | Manuel |
| Datum: | 31.10.2007, 14:10 Uhr |
| URL: | http://www.josupeit.com/ |
| Kommentar: | Ich werde mir jedenfalls alle Mühe geben  |
| Name: | thelackier |
| Datum: | 31.10.2007, 08:49 Uhr |
| URL: | http://www.thelackier.de |
| Kommentar: | Hey I-Jo. Ich finds klasse wenn in naher Zukunft viele viele Tipps vom Profi kommen. (Also von DIR!)So kann man die eine oder andere Sache dir ja schon mal abnehmen, damit du weiterhin dein Herz schonen kannst und nicht aufgrund eines IE Problems das zeitliche segnest. LG thelackier |
Bisherige Trackbacks:
Keine