2.4 Der Aufbau des XHTML-Quelltextes
Der XHTML-Quelltext bildet den ersten Grundbaustein von YAML. Schauen wir uns also den Quelltext anhand einer Beispieldatei etwas genauer an. In dieser Datei ist das Basislayout vollständig umgesetzt, Inhalte (mit Ausnahme der Spaltenbezeichnungen) fehlen jedoch.
In der Quelltext-Ansicht wird der strukturelle Aufbau gut sichtbar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head> ... </head>
<body>
<div id="page_margins">
<div id="page" class="hold_floats">
<div id="header"> ... </div>
<div id="nav"> ...</div>
<!-- Anfang 3-Spalten-Hauptteil -->
<div id="main">
<!-- Linke Spalte -->
<div id="col1">
<div id="col1_content" class="clearfix">
...
</div>
</div>
<!-- Rechte Spalte -->
<div id="col2">
<div id="col2_content" class="clearfix">
...
</div>
</div>
<!-- Mittlere Spalte -->
<div id="col3">
<div id="col3_content" class="clearfix">
...
</div>
<!--
IE Column Clearing -->
<div id="ie_clearing"> </div>
<!-- Ende: IE Column Clearing -->
</div>
<!-- Ende 3-Spalten-Hauptteil -->
</div>
<!-- Fußzeile -->
<div id="footer"> ... </div>
</div>
</div>
</body>
</html>
Der äußerste DIV-Container #page_margins ist für die Bereitstellung von grafischen Layouträndern vorgesehen bzw. er erhält bei fixen Layouts die vorgesehene Breite. Dazu jedoch später mehr.
Der zweite DIV-Container #page umschließt ebenfalls alle weiteren Container. Mit seiner CSS-Klasse .hold_floats sorgt er dafür, den Escaping Floats Bug des Internet Explorers (siehe Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer) bei der Verwendung von float-Umgebungen (z.B. im Menü) zu vermeiden. Es folgen die Container für den Kopfbereich #header, die Hauptnavigation #nav sowie der Hauptinhaltsbereich #main mit seinen drei Spalten. Zum Schluss steht, wie zu erwarten, der #footer welcher die Inhalte der Fußzeile aufnimmt.
Der rot markierte Bereich des IE Column Clearings wird im Abschnitt 2.7: Das Clearing von #col3 ausführlich behandelt.
Box-Model-Bug des Internet Explorers
Wie aus dem Quelltext bereits zu erkennen, werden sowohl die gesamte Webseite als auch die drei Inhaltsspalten durch jeweils zwei DIV-Container repräsentiert. Diese Schachtelung hat folgenden Hintergrund:
Webbrowser kennen zwei Modi zur Darstellung einer Webseite:
- Standardkonformer Modus
- In diesem Modus interpretiert der Browser HTML so, wie es vom W3C definiert wird. Bei Fehlern im HTML-Code kommt es oft zu schwerwiegenden Darstellungsfehlern. Für fehlerfreie Seiten besteht in diesem Modus jedoch größtmögliche Sicherheit für ein browserübergreifend einheitliches Erscheinungsbild.
- Quirk-Modus
- In diesem Modus ist der Browser deutlich fehlertoleranter und wird versuchen, unter allen Umständen eine brauchbare Internetseite anzuzeigen. Dieser Modus ist zudem in allen Browsern standardmäßig voreingestellt, und wird verwendet wenn kein oder ein sehr alter Doctype im HTML-Dokument vorgegeben wird.
Der Internet-Explorer interpretiert im Quirk-Modus das CSS-Box-Modell falsch. Auf Grund dessen berechnet er die Gesamtbreite von Blockelementen bei der Angabe von width in Verbindung mit den Eigenschaften padding und/oder border falsch. Um den Internet Explorer trotzdem zur Darstellung der korrekten Breite zu überreden, existiert der Box-Modell-Hack. Damit wird dem Internet Explorer eine "falsche" Breite untergeschoben, welche die Fehlinterpretation des Browsers ausgleicht und zum richtigen Ergebnis führt.
Der Internet Explorer 6 lässt sich durch Angabe eines passenden Doctypes in den standardkonformen Modus versetzen. Jedoch wurde YAML von Beginn an für eine volle Unterstützung der Version 5 des Internet Explorers ausgelegt. Diese Version arbeitet generell im Quirk-Modus.
YAML wurde zudem in erster Linie für flexible Layouts entworfen. Der Box-Modell-Hack lässt sich jedoch nur auf fixe Breiten anwenden. Bei der Angabe flexibler Spaltenbreiten (in % oder em) bzw. bei flexibel definierten Randabständen lässt er sich nicht einsetzen.
Die Lösung liegt in der Aufteilung der Spalten in ein verschachteltes DIV-Paar. Die Gesamtbreite der Spalte wird für das äußere DIV #colx festgelegt. Die Innenabstände (padding) werden hingegen dem inneren DIV #colx_content zugewiesen, welches wiederum keine feste Breite erhält. Somit wird der Box-Modell-Bug umgangen und es sind beliebige Kombinationen auf fixen und flexiblen Größenangaben für Spaltenbreiten und Randabstände möglich.
