3.4 Hilfestellung für den Internet Explorer

Das Stylesheet iehacks.css im Verzeichnis css/main bildet den dritten und letzten Grundbaustein des YAML-Frameworks. Auch diese Datei sollte unverändert bleiben.

Wichtig: Mit der YAML Version 2.3 werden die layoutabhängigen CSS-Angaben aus der Datei herausgenommen und in einer layoutabhängigen Anpassungsdatei verwaltet. Dies betrifft die Anpassungen des "Flicker"-Hacks sowie die Beseitigung des 3-Pixel-Jog Bugs, welche layoutabgängig geschehen muss.

Der Internet Explorer (5.x und 6.0) mit seinen zahlreichen CSS-Bugs verlangt leider nach etwas mehr Zuwendung in Form von speziellen CSS-Angaben. Einige dieser Anpassungen sind jedoch vom verwendeten Layout abhängig - nicht alle Bugs treten immer Fall auf. Um auch hier variabel zu bleiben, wird die Datei iehacks.css nicht direkt im (X)HTML-Quelltext einbebunden sondern über ein ebenfalls layoutabhängige Stylesheet, eine sogenannte layoutabhängige Anpassungsdatei.

Diese layoutabhängigen Anpassungsdateien für den Internet Explorer befinden sich im Verzeichnis css/explorer, wie z.B. die iehacks_standard.css welche die Anpassungen für das YAML-Standardlayout enthält.

Um diese CSS-Angaben ausschließlich für den Internet Explorer zugänglich zu machen, werden diese innerhalb eines gesonderten Stylesheets über einen Conditional Comment im XHTML-Code an den Internet Explorer übergeben. Dies wurde am Ende des Abschnitts 3.1: Das zentrale Stylesheet bereits kurz erwähnt.

...
<!--[if lte IE 6]>
  <link href="css/explorer/iehacks_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

Die Bedingung lte IE 6 bedeutet: "kleiner oder gleich Internet Explorer Version 6.0". Damit wird die kommende Version des Internet Explorers 7.0 zunächst ausgeschlossen. Wenn sich die bisherigen Berichte bewahrheiten, sollte die Version 7 das YAML-Layout ohne Hacks korrekt anzeigen.

Anpassung an beliebige Layoutmodifikationen

Die Datei iehacks.css im Verzeichnis css/main ist auf die Belange des Basis-Layouts zugeschnitten und bildet zusammen mit der Datei base.css das Fundament des YAML-Frameworks. Auch bei den Anpassungen für den Internet Explorer greift das Baukastensystem.

Schauen wir uns dazu am besten einfach eine Anpassungsdatei an. Als Beispiel dient das in diesem Tutorial verwendete Layout layout_3col_standard.css. im Verzeichnis css/explorer.

...
/* LAYOUT-UNABHÄNGIGE ANPASSUNGEN -----------------------*/
@import url(main/iehacks.css);

/* LAYOUT-ABHÄNGIGE ANPASSUNGEN -------------------------*/
@media screen
{
  ...
  ...
}

Jede Anpassungsdatei besteht aus zwei Teilen. Der erste Teil beinhaltet alle vom Layout unabhängigen Angaben. An dieser Stelle wird die Datei iehacks.css eingebunden. Der zweite Teil widmet sich den layoutabhängigen Anpassungen und kann beliebig erweitert werden.

Hinweis: Zu jedem Layout (bzw. zu jedem zentralen Stylesheet) gehört eine ensprechende Anpassungsdatei für den Internet Explorer.

Nachfolgend werden die einzelnen innerhalb des YAML-Layouts benötigten Anpassungen und Hacks für den Internet Explorer ausführlich erläutert.

Layoutunabhängige Anpassungen (Der Inhalt der Datei iehacks.css)

Am Anfang der Datei iehacks.css befinden sich die Anpassungen für das markupfreie Clearing. Die Anpassungen betreffen die Klassen .clearfix und .floatbox. Diese Anpassungen benötigen wir sowohl im Screen-, als auch im Printlayout. Diese Anpassunge werden daher innerhalb der Regel @media all zusammengefasst. Alle weiteren Anpassungen sind nur für die Ausgabe am Bildschirm interessant und werden daher mittels @media screen auf die Ausgabe am Monitor beschränkt.

Excaping Floats Bug

Der Escaping Floats Bug positioniert der Internet Explorer floats innerhalb eines DIV-Containers fehlerhaft. Zwei Probleme treten dabei auf. Erstens wird die Größe des umgebenden DIV-Containers falsch berechnet und zweitens laufen die floats nach rechts aus dem Container heraus. Beide Probleme lassen sich durch Vorgabe von height 1%; lösen. Für die Verwendung innerhalb von YAML wird die Klasse .hold_floats definiert, die das Fehlverhalten des IE beseitigt.

Dieser Universal-Hack wird an verschiedenen Stellen eingesetzt, da er gleichzeitig auch nocht verschiedene andere IE-spezifische Probleme löst.

Guillotine Bug durch Wechsel der Hintergrundfarbe von Hyperlinks

Innerhalb des YAML-Frameworks wird sowohl im Haupteil als auch in der Fußzeile des Layouts die Hintergrundfarbe von Hyperlinks geändert, wenn der Mauszeiger über den Link bewegt wird (hover). Die entsprechende Deklaration ist Bestandteil der Datei css/main/content.css:

a, a em.file {color: #900; text-decoration:none;}
a:hover {background-color: #fee; text-decoration:underline;}

Dieser Farbwechsel ist für die Lesbarkeit und die Navigation am Bildschirm zwar recht hilfreich, er ist allerdings auch einer der zahlreichen Auslöser des IE/Win Guillotine Bugs. Dies ist vermutlich einer der lästigsten Wegbegleiter eines jeden Webdesigners. Geschickt umgehen lässt sich der Bug leider nicht. Beseitigen lässt er sich nur, indem man — zumindest im Internet Explorer — auf besagten Hovereffekt verzichtet.

/* Guillotine Bug bei Änderung der Hintergrundfarbe von Links */
a, a:hover { background: transparent; }

Aufgrund der zahlreichen Möglichkeiten, diesen Bug auszulösen, ist es ratsam die IE Anpassungen je nach Bedarf an dieser Stelle zu ergänzen.

Double Float-Margin Bug

Bei der Positionierung von Float-Containern mit Margins verdoppelt der Internet Explorer angegeben die Werte der Margins ("Doubled Float-Margin Bug") und sorgt daher gelegentliche Layout-Probleme, speziell bei der freien Anordnung der Contentspalten.

Der Bug ist glücklicherweise recht einfach zu beheben. Den beiden Floatspalten #col1 und #col2 wird dazu die Eigenschaft {display:inline;} zugewiesen. Diese Eigenschaft wird bei Floatobjekten von allen modernen Browsern ignoriert und sorgt dafür, dass der Internet Explorer die Margins korrekt darstellt.

...
#col1, col2 { display: inline; }
...

Damit sind alle den Internet Explorer betreffenden Hacks erläutert, die für die korrekte Darstellung des YAML-Layouts erforderlich sind.

Textumbuch-Probleme des Internet Explorers

Zur Beseitigung der Schwierigkeiten beim Textumbruch des Internet Explorers und damit einer saubereren Darstellung des Layouts erzwingt man einen speziellen Textumbruch-Modus des Internet Explorers:

...
#col1_content, #col2_content, #col3_content {
    word-wrap: break-word;
}
...

Bei word-wrap: break-word; handelt es sich um keine standardisierte CSS-Eigenschaft sondern um eine spezielle Eigenschaft, welche nur der Internet Explorer versteht. Sie erlaubt es dem Browser, Text nicht am Wortende sondern nach jedem Buchstaben umzubrechen. Dies beeinträchtigt zwar geringfügig die Lesequalität des Textes bei einer sehr kleinen Spaltenbreite, sichert dafür aber die Konsistenz des Layouts.

Die älteren Versionen 5.x des Internet Explorers sprechen auf diesen Hack leider nicht an.

"Flicker"-Bug des Internet Explorers

Eine exakte Bezeichnung für diesen Bug gibt es nicht. Er sorgt jedoch in einigen Fällen dafür, dass die statische Spalte #col3 beim Ändern der Größe des Browserfensters gelegentlich verschwindet.

Ursache: Zu mindestens 50 Prozent liegt das Problem im schlechten Textumbruch des Internet Explorers begründet. Die anderen 50 Prozent konnte ich nicht isolieren. Es kann sich um einen unbekannten IE-Bug oder um eine Kombination verschiedener Rendering-Fehler des Internet Explorers handeln, die letztlich zum Verschwinden der mittleren Spalte führen.

Für den Internet Explorer 6.0 habe ich eine Lösung gefunden. Die Version 5.5 des Internet Explorers spricht teilweise darauf an, der IE5.01 leider gar nicht.

Lösung: Dazu muss #col3_content die CSS-Eigenschaft display:inline; erhalten.

...
#col3_content { display: inline; margin:0; padding:0; }
...

Dadurch verliert #col3_content jedoch seinen Charakter als Blocklevel-Element.

Dies ist jedoch nur der erste Teil des Hacks. Durch die Modifikation von #col3_content werden die CSS-Eigenschaften padding und margin vom Browser nicht mehr interpretiert. Diese Anpassungen sind jedoch layoutabängig und werden daher innerhalb der übergeordneten Anpassungsdatei geregelt.

Layoutabhängige Hacks innerhalb der Anpassungsdateien

"Flicker"-Bug des Internet Explorers

Die Randabstände müssen von #col3_content müssen nun #col3 zugewiesen werden.

...
#col3 {margin-top: 0; padding: 1em; padding-top: 1.05em; }
#col3_content .floatbox {display: inline-block; width: auto;}
... Ebenso wie #col3_content muss auch die Klasse .floatbox modifiziert werden, um den Blockcharakter innerhalb eines Inline-Elements (inline-block) zu erhalten. Dies ist notwendig, um die Clear-Funktion von .floatbox weiterhin zu gewährleisten.

Hinweis: Verwenden Sie in der statischen Spalte #col3 weitere Blockelemente (z.B. blockquote ) innerhalb von .floatbox umschlossenen float-Umgebungen, so müssen diese analog zu .floatbox angepasst werden.

3-Pixel-Jog Bug

Problemstellung: Sobald sich links neben der statischen Spalte #col3 eine Floatspalte befindet, tritt der 3-Pixel-Jog Bug des Internet Explorers auf. Wenn der Inhalt der statischen Spalte #col3 länger als der Inhalt der daneben befindlichen Floatspalte wird, entsteht ein horizontaler Versatz der Inhalte in #col3 um 3 Pixel. Die Auswirkungen sind im nebenstehenden Screenshot sichtbar.

Lösung: Die Vergabe der CSS-Eigenschaft height: 1%; an #col3 sorgt dafür dass der Bug verschwindet. Die Funktionsweise des Hacks beruht darauf, dem entsprechenden Container im Internet Explorer mit der Eigenschaft hasLayout zu belegen.

/* LAYOUT-ABHÄNGIGE ANPASSUNGEN -----------------------*/
...
#col3 { height: 1%; }
...

Die Allerdings korrigiert der IE dabei nicht den fehlerhaften Versatz, sondern verschiebt alle Elemente des Containers #col3 um den gleichen Betrag von 3 Pixeln. Daher ist es anschließend möglich, diesen Versatz Hilfe zweier negativer Margins zu korrigieren.

Diese Korrektur erfolgt jeweils layoutabhängig in den Anpassungsdateien im Verzeichnis css/explorer:

/* LAYOUT-ABHÄNGIGE ANPASSUNGEN -----------------------*/
...
#col3 { height: 1%; }
#col1 {margin-right: -3px;}
#col2 {margin-left: -3px;}
#col3 { margin-left: 21.5%; margin-right: 24%; }
...

Achtung: Dieser Hack beseitigt nicht nur den 3-Pixel-Jog Bug sondern sorgt zugleich auch dafür, dass der "Flicker"-Bug sowie der im Abschnitt 5.3: Bekannte Probleme beschriebene Rendering-Bug nicht auftritt. Der Hack sollte daher - wann immer es geht - eingesetzt werden. Allerdings gibt es auch Grenzen für den Einsatz:

grafikfreie Spaltentrenner
Der HR-Tag am Ende der Spalte #col3 sorgt dafür, dass diese Spalte immer mindestens so lang wie die längste Floatspalte wird. Dies ist für die Funktion der grafikfreien Spaltentrenner von besonderer Bedeutung. Die Beseitigung des 3-Pixel-Jog Bugs hat jedoch den nachteiligen Nebeneffekt, dass der IE das Clearing mit dem HR-Tag nicht mehr sauber ausführt und die Spalte #col3 nicht mehr an die Länge der Floatspalten gekoppelt ist.
Layouts mit mindestens 2 flexiblen Spalten und #col3 in Randlage
Da sich der 3-Pixel-Jog Bug nicht wirklich beseitigen lässt sondern nur seine optischen Auswirkungen - verursacht er auch weiterhin Rundungsfehler bei der Breitenberechnung flexibler Spalten. Befindet sich die statische Spalte #col3 in Randlage (wie z.B. beim YAML-Layout 2col_left), kann es dazu kommen, dass die Spalte #col3, obwohl eigentlich flexibel in der Breite, vom Internet Explorer unterhalb der Float-Spalten positioniert wird. Zudem wird in diesem Fall der "Flicker"-Bug aktiv.

»»» Abschnitt 3.5: Layoutanpassungen über 'basemod'