5.3 Bekannte Probleme & Hinweise
Internet-Explorer 5.x: Kollabierender Margin bei #col3
| IE 5.x/Win | IE 5.x/Mac | IE 6 | IE 7 RC1 | |
|---|---|---|---|---|
| Bug aktiv | Ja | Unbekannt | Ja *) | Ja *) |
*) Der Bug ist prinzipiell auch in diesen Browserversionen vorhanden, wird jedoch durch das spezielle IE-Clearing (siehe Abschnitt 2.7: Das Clearing der Spalte #col3) unterdrückt.
Beschreibung: Die Spalte #col3 besitzt die Eigenschaft width:auto. Der Internet Explorer vergibt an diesen Container daher das Merkmal hasLayout = false.
Im speziellen Fall dass im 3-Spalten-Layout die linke Spalte die kürzeste und die rechte Spalte gleichzeitig die längste der drei Spalte ist, kollabiert im Internet Explorer der linken Außenabstand (Margin) von #col3.
Dies führt dazu, dass ein eventuell vorhandener Rahmen an #col3 (grafikfreie Spaltentrenner) zwischen #col1 und #col3 an den linken Seitenrand rutscht. Ein eventuell definierter Hintergrund von #col3 wird ebenfalls bis zum linken Seitenrand ausgedehnt. Auf die eigentlichen Inhalte des DIV's (Texte, Grafiken usw.) hat diese Verbreiterung im YAML-Layout keinen Einfluss, da #col3 durch die vorgegebene Sortierung via z-index hinter den Randspalten liegt. Der Bug kann auf der folgenden Testseite nachvollzogen werden.
Testseite: artikel/hinweise/ie_bug.html (Bug ist nur im IE5.x sichtbar!)
Workaround 1: Die sichtbaren Folgen des Bugs können vermieden werden, in dem als linken Spaltentrenner eine Grafik verwendet und diese als Hintergrundgrafik z.B. in #main definiert. Des Weiteren sollte #col3 kein Hintergrund (Grafik oder Farbe) zugewiesen werden (siehe Abschnitt 4.9: Layoutentwurf "3col_fixed" ). Dies kann bei Bedarf ebenfalls in #main oder #page erfolgen.
Workaround 2: Alternativ hilft hier die Aktivierung von hasLayout = true für #col3 innerhalb der Anpassungsdatei für den Internet Explorer das Problem beseitigen:
...
#col3 {height: 1%;}
...
Mit dem Einsatz dieses CSS-Hacks sind jedoch die grafikfreien Spaltentrenner nicht mehr einsetzbar. Daher muss auch bei diesem Workaround generell auf den Einsatz von Hintergrundgrafiken (Faux-Columns Technik) zurückgegriffen werden.
Hinweis: Mit der YAML Version 2.5 wurde dieser Bug im IE6 und IE7 beseitigt. Auf Grund der nur noch sehr geringen Verbreitung des IE 5.x in der heutigen Zeit stellt er kein großes Problem dar. Der Bug behindert zudem nicht die Zugänglichkeit der Webseite.
Mozilla & Firefox
Mozilla-Browser bis Version 1.7.0: In der Render-Engine des Mozilla-Browsers war bis zur Version 1.7.0 (ebenso im Firefox-Browser bis zur V1.0) ein Float Clearing Bug enthalten. Dieser führte dazu, dass an #col3 gebundene Spaltentrenner nicht bis zur Fußzeile geführt wurden falls eine der Randspalten länger als die mittlere Spalte wird. Auf grafische Elemente, die als Hintergrundbilder eingefügt werden, hatte dies keinen Einfluss.
Bugfix: Der Bug ist seit V1.7.1 vom Juli 2004 nicht mehr existent und kann daher mittlerweile vernachlässigt werden.
Netscape
Netscape 6 & 7: Die Browserversionen 6.x basieren auf unfertigen Beta-Versionen des Mozilla-Browsers und sind daher extrem fehlerbehaftet. Obwohl die Version 7.x offiziell die Rendering-Engine des Firefox 1.0.1 bzw. 1.0.2 beinhaltet, gibt es auch hier an verschiedenen Stellen CSS Kompatibilitätsprobleme.
YAML unterstützt den Netscape-Browser ab der Version 8 vollständig. In dieser Version wurden keine Darstellungsfehler YAML-basierter Layouts festgestellt.
Netscape 7: overflow-Bug
Das markupfreie Clearing mittels overflow:hidden führt im Netscape 7.x zu Darstellungsfehlern bei der Anwendung auf statischer Boxen. Aufgrund dessen werden die Inhalte der Subtemplates nicht dargestellt. Der nachfolgende Workaround ermöglicht die Beseitigung dieses Bugs.
Workaround: Um die Darstellung der Inhalte im Netscape 7 zu ermöglichen, sind folgende Schritte erforderlich:
- Die CSS-Klasse .subtemplates muss um die
Eigenschaft
float:left erweitert werden. Diese Ergänzung
erfolgt sinnvollerweise innerhalb der Datei basemod.css Ihres
Layouts.
/* Hack für Netscape 7 */
.subcolumns {float: left;}In Verbindung mit float:left interpretiert der Netscape 7 die Eigenschaft overflow:hidden korrekt und stellt die Inhalte der Subtemplates dar.
-
Im Falle, dass nachfolgende Inhalte neben dem Subtemplate gerendert werden statt unterhalb (ist bisher nur bei Tabellen bekannt), sollte diesen Elementen die Eigenschaft display:inline gegeben werden.
Opera
Opera 9.01 Bug: Die Opera-Version 9.01 beinhaltet einen Hover-Bug, der dazu führt das Margins zwischen einem clearenden Element und dem nachfolgenden Element kollabieren. In der aktuellen Version 9.02 ist der Bug nicht mehr enthalten.
Workaround: Statt des Einsatzes von Margin können Abstände mit Padding oder Bordern erzeugt werden. Auf diese Weise wird das Problem vermieden.
Opera 6: Obwohl der Opera 6 prinzipiell in der Lage ist, auf YAML basierende Designs korrekt darzustellen, kann es unter bestimmten Umständen zu unvorhergesehenen Phänomenen kommen (Bereiche, die sich nicht anklicken lassen und Ähnliches). Diese Browserbugs des Opera 6 lassen sich nicht mit vertretbarem Aufwand abstellen. Die Browser-Version kann heutzutage jedoch getrost ignoriert werden.
