IE und CSS
Simple Fixes for Boxes
Erfüllende Standards
Wie man auch den IE "bewegen" kann
Nur zur Erinnerung - standardkonforme Browser zählen margin, padding und border zur definierten width hinzu, während IEs (Quirks) sie von der definierten Breite abziehen.
Die Borders im Beispiel sollen hier nur die Grenzen kennzeichnen und wir halten diese 2px der Einfachheit halber mal aus den folgenden Berechnungen heraus.
Diese Linie ist 300px breit
Der Inhalt dieser Box läuft auch genau 300px breit. Allerdings klappt das nur in einem standardkonformen Browser.
#box {
width: 300px;
padding: 20px;
}
Im unserer Beispiel-Box sehen wir das ganz deutlich - der Text in der Box soll 300px breit laufen und 20px padding zu den Rändern halten. Die Box braucht also eine Gesamtbreite von 340px und ist somit deutlich breiter als die Kontroll-Linie. Im IE hingegen ist die gesamte Box nur so breit wie die Kontroll-Linie.
Wie erreichen wir nun gleichmäßige Darstellung in verschiedenen Browsers?
Je nachdem, welche Darstellung wir verfolgen, bieten sich verschiedene Möglichkeiten. Wenn wir verhindern wollen, daß sich die Box verbreitert, müssen wir das padding nicht der Box zuweisen, sondern dem enthaltenen Kind-Element (in diesem Fall P).
Diese Linie ist 300px breit
Der Inhalt dieser Box läuft nun 300px minus padding breit, in jedem Browser.
#box {
width: 300px;
}
#box p {
padding: 20px;
}
Soll wirklich der Text über exakt 300px Breite laufen, müssen wir den IEs explizit mitteilen, wie breit die benötigte Box sein muß (in unserem Beispiel also 340px). Zu diesem Zweck fügen wir in die Styles eine redundante Anweisung hinzu, die nur von IEs interpretiert wird.
Diese Linie ist 300px breit
Der Inhalt dieser Box läuft nun 300px breit, die Box ist auf 340px erweitert, in jedem Browser.
#box {
width: 300px;
padding: 20px;
}
/* star html hack fuer IE */
* html #box {
width: 340px;
}
An dieser Stelle sei nochmals erwähnt, daß der Boxmodel-Fehler in IEs bis 5.5 sowie im IE6/Quirksmodus auftritt. Wird der IE6 im Standardmodus bedient, sollte man die oben beschriebene Lösung in Conditional Comments auslagern, die man dann den entsprechenden Browser-Versionen zuordnet.
Was ist Quirks?
Der Quirks-Modus ist ein Darstellungsmodus bei modernen Webbrowsern, der die Abwärtskompatibilität zu Websites sicherstellen soll, die veralteten oder ungültigen HTML-Code verwenden. Dabei werden u.a. Darstellungsfehler bei alten Browserversionen simuliert, damit das Layout dieser Webseiten nicht zerstört wird. Alle modernen Browser richten den Darstellungsmodus nach der Dokumenttypdefinition (Doctype) im HTML-Quellcode. Fehlt die Doctype-Angabe, wird der Quirks-Modus verwendet.
Quelle: http://de.wikipedia.org/wiki/Quirks-Modus
Quirks-Modus im IE 6 Windows
Quirks-Modus bei Browsern mit der Gecko-Engine (Mozilla, Firebird)
Wenn es verschiedene Modi gibt, muss man die Browser auch in diese Modi schalten können. Dieses "Umschalten" wird als Doctype-Switching bezeichnet. Wie die Bezeichnung bereits vermuten lässt, benötigt man dazu die Doctype-Declaration. Wann genau welcher Browser in welchen Modus umschaltet, wird hier mittels einer ausführlichen Tabelle dargestellt:
http://www.fabrice-pascal.de/artikel/dtd/
Weitere Informationen zu Doctypes bietet auch:
http://www.thestyleworks.de/basics/doctypes.shtml
Mehr?
Browser-News | Produktiv? | Browser-Links | mehr Workshops | Tips und Tricks