3.5 CSS-Anpassungen für den Internet Explorer

Der Internet Explorer bietet seit der Version 5 eine umfassende Unterstützung für CSS 1 und eine gute Unterstützung für CSS 2. Insbesondere die CSS 2-Unterstützung enthält jedoch zahlreiche Fehler, die bei Nichtbeachtung schnell zu Darstellungsfehlern im Layout führen können.

Die XHTML-Struktur des YAML-Basislayouts ist so angelegt, dass sich mit auf dieser Basis mit Hilfe von CSS eine Vielzahl möglicher Layoutvariationen erstellen lassen. Um diese große Flexibilität gewährleisten zu können, müssen die zahlreichen CSS-Bugs des Internet Explorers zuverlässig abgefangen werden. Dabei ergeben sich zwei Arten von IE-Bugs.

Bugs, die aufgrund der im YAML-Framework umgesetzten Quelltext-Struktur generell auftreten und somit unabhängig vom eigentlichen Layout sind.
Und es gibt Bugs, die nur bei bestimmten CSS-Modifikationen auftreten oder deren Behebung beispielsweise unterschiedliche Vorgehensweisen in Abhängigkeit der Spaltenanzahl des Layouts bedingt.

Auch bei den Anpassungen für den Internet Explorer greift das Baukastensystem. Um größtmöglichen Gestaltungsfreiraum für den Webdesigners zu ermöglichen, erfolgt die Anpassung des Layouts an die speziellen Bedürfnisse des Internet Explorers ebenfalls in zwei Schritten:

layoutunabhängige Anpassungen: Die Datei iehacks.css im Verzeichnis css/main beinhaltet alle CSS-Hacks, die zur Beseitigung der strukturell bedingten CSS-Bugs erforderlich sind sowie alle IE-Anpassungen für die vom YAML-Framework bereitgestellten Features, z.B. die Subtemplates (siehe Abschnitt 4.5).
layoutabhängige Anpassungen: Zu jedem Layout, also zu jedem zentralen Stylesheet, gehört eine gleichnamige Anpassungsdatei iehacks_[layout].css, wobei [layout] den Namen des jeweiligen Layouts symbolisiert. Die Anpassungsdateien befinden sich im Verzeichnis css/explorer. In diesen Dateien werden die layoutabhängigen Darstellungsfehler beseitigt.

Einbindung der CSS-Anpassungen in das YAML-Layout

Zu jedem Layout, also zu jedem zentralen Stylesheet, gehört eine gleichnamige Anpassungsdatei iehacks_[layout].css. Analog zum zentralen Stylesheet (siehe Abschnitt 3.3), welches die einzelnen Layoutbausteine zusammenfügt, enthält diese Datei alle Anpassungs-Bausteine für den Internet Explorer.

Um diese CSS-Angaben ausschließlich für den Internet Explorer zugänglich zu machen, wird sie innerhalb des HTML Headers <head>..</head> über einen Conditional Comment im XHTML-Code an den Internet Explorer übergeben. Dies wurde am Ende des Abschnitts 3.3: Das zentrale Stylesheet bereits erwähnt.

 ...

          <!--[if lte IE 7]>

  <link href="css/explorer/iehacks_col3_standard.css" rel="stylesheet" type="text/css" />

<![endif]-->

</head>

Die Bedingung lte IE 7 bedeutet: "kleiner oder gleich Internet Explorer Version 7.0". Dieser spezielle Kommentar wird nur vom Internet Explorer erkannt und die darin befindlichen Anweisungen ausgeführt. Für alle anderen Browser handelt es sich um einen normalen HTML-Kommentar dessen Inhalt ignoriert wird.

Schauen wir uns dazu am besten einfach eine Anpassungsdatei an. Als Beispiel dient die Datei iehacks_3col_standard.css. im Verzeichnis css/explorer, welche entsprechend ihrers Dateinamens zum zentralen Stylesheet layout_3col_standard.css gehört.

...

/* 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 enthält die layoutabhängigen Anpassungen und kann beliebig erweitert werden.

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 in iehacks.css

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

Sie ist auf die Belange des Layout-Rohbaus zugeschnitten und bildet zusammen mit der Datei base.css das Fundament des YAML-Frameworks.

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 Drucklayout. Diese Anpassungen 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.

Hinweis: Obwohl der IE5/Mac innerhalb dieses Frameworks nur eingeschränkt unterstützt wird - er wird Normalfall von jeglichen Stylesheets ausgeschlossen - werden die Belange dieses Browsers bei allen IE-Anpassungen berücksichtigt, um ein problemloses Zusammenführen der CSS-Datein des Frameworks für YAML-Anwender zu erleichtern und so ggf. eine Unterstützung des IE5/Mac zu ermöglichen.

Escaping Floats Bug

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Nein	Ja	Nein

Beim 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.

/* Hides from IE-mac \*/

     * html .hold_floats { height: 1%; }

/* End hide from IE-mac */

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

Guillotine Bug durch Hover-Effekte von Hyperlinks

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Ja	Ja	Nein

Innerhalb des YAML-Frameworks wird sowohl im Hauptteil 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 Hover-Effekt 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

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Ja	Ja	Nein

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

Bugfix: 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.

...

			* html #col1 { display: inline; }

			* html #col2 { display: inline; }

		  ...

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

Expandierende Boxen im Internet Explorer

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Ja	Ja	Nein

Der Internet Explorer hat große Schwierigkeiten im Umgang mit übergroßen Inhalten innerhalb von Boxen mit festgelegter Breite. Siehe dazu Internet Explorer and the Expanding Box Problem.

Bugfix: 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:

 ...

			* html #col1_content { word-wrap: break-word; }

			* html #col2_content { word-wrap: break-word; }

			* html #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.

Internet Explorer und das Italics Problem

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	???	Ja	Nein

Das in älteren YAML-Versionen als "Flicker"-Bug nicht näher bezeichnete Problem ist nunmehr identifiziert. Es handelt sich um den Italics-Bug des Internet Explorers. Der IE erweitert die Breite einer Box sobald Text mittels <i> oder <em> in Italics (also "schräg gestellte" Textpassagen) an den rechten Zeilenrand stoßen. Die CSS-Eigenschaft font-style: italics kann den Bug ebenso auslösen.

Die in diesem Fall stattfindende Erweiterung der Breite der umgebenden Box führt zu Problemen in floatenden Layouts, da die entsprechende Box plötzlich nicht mehr in das Layout passt. Das Problem betrifft in erster Linie die statische Spalte #col3. Beim Ändern der Größe des Browserfensters verschwindet diese plötzlich.

Bugfix: Dazu muss #col3_content die CSS-Eigenschaft overflow:visible; erhalten.

 ...

			* html #col3_content { overflow:visible; }

			...

Obwohl visible den Standardwert der Eigenschaft overflow darstellt, und daher eigentlich keinerlei Auswirkungen haben dürfte, behebt dies das Problem im IE5.5+. Für den IE5.01 gibt es leider keine so einfache Lösung. Allerdings ist dieser Browser auch kaum noch anzutreffen.

Disappearing List Background Bug

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Ja	Ja	Nein

Der Disappearing List-Background Bug des Internet Explorers wird ausgelöst, sobald Listen innerhalb von floatenden DIV's platziert werden. Dies betrifft Listen innerhalb der float-Spalten #col1 und #col2 sowie jede Liste innerhalb weiterer floatender DIV's in den späteren Inhalten. Der Bug sorgt dafür, das Hintergrundfarben oder -grafiken von Listenelementen gar nicht oder nur teilweise dargestellt werden.

Bugfix: Zur Beseitigung des Bugs wird den Listen die Eigenschaft position:relative; zugewiesen. Dies hat im Allgemeinen keine Auswirkungen auf das Layout und beseitigt den Bug zuverlässig.

...

          * html ul { position: relative }

	      * html ol { position: relative }

	      * html dl { position: relative }
 
	      ...

Das Problem mit teilweise verschwindenden Hintergründen ist jedoch nicht allein auf Listen beschränkt. Leider ist nur dieser Zusammenhang in Form des Disappearing List Background Bugs bekannt geworden.

Das Problem kann jedoch grundsätzlich auch bei anderen Elementen auftreten. In diesem Fall hilft das Erzwingen von hasLayout, das Problem zu beseitigen. Innerhalb des Basislayout wird daher zusätzlich das <blockquote> Element gefixt.

* html blockquote { zoom:1 }

Dieses Element verliert leicht seine Hintergrunddefinition, wenn innerhalb des Elements mit <p> Tags gearbeitet wird. Sollte das Problem bei weiteren Elementen auftreten, ergänzen Sie den Fix innerhalb ihrer layoutabhänigen Anpassungsdatei nach dieser Vorgehensweise.

Layoutabhängige Hacks in iehacks_[layout].css

3-Pixel-Jog Bug

	IE 5.x/Win	IE 5.x/Mac	IE 6	IE 7
Bug aktiv	Ja	Nein	Ja	Nein

Screenshot 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 -----------------------*/

          ...

          

          /* Hides from IE-mac \*/          

			* html #col3 { height: 1%; }

			...

			/* End hide from IE-mac */

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 -----------------------*/

		    ...

		    /* Hides from IE-mac \*/

	      * html #col3 { height: 1%; }  

		    * html #col1 {margin-right: -3px;}

		    * html #col2 {margin-left: -3px;}

		    * html #col3 { margin-left: 21.5%; margin-right: 24%; } 

		  /* End hide from IE-mac */

		  ...

Hinweis: Der Hack beseitigt einen reinen optischen Mangel im Internet Explorer. Seine Berücksichtigung ist daher nicht zwingend erforderlich. Allerdings gibt es auch Grenzen für den Einsatz:

grafikfreie Spaltentrenner

Der DIV-Tag für das IE-Clearing 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.

In diesen Fällen müssen Sie auf die Technik "Faux Columns" zur Gestaltung von Spaltenhintergründen mittels Hintergrundgrafiken zurückgreifen.

»»» Abschnitt 3.6: Layoutanpassungen über basemod.css