Keywords

Allgemeines zum Box Model

Alle Elemente, die in einem HTML-File vorkommen kann man sich als einzelne rechteckige Boxen vorstellen. Jede dieser Boxen hat Platz für ihren Inhalt, weiters einen Innenabstand zwischen dem Inhalt und dem Rahmen, einen Rahmen selber und aussen herum wiederum einen Abstand zu den angrenzenden Objekten. Dieses Modell wird als "Box Model" bezeichnet.

standard box model

Abb.: Standard CSS Box Model

Erklärung der Box Model Attribute:

  • width - Breite Des Inhalts eines Elements
  • height - Höhe des Inhalts eines Elements
  • margin (top, right, bottom, left) -Der Außenabstand eines Elements vom Rahmen bis hin zum nächsten Element
  • border (top, right, bottom, left) - Der Rahmen um ein Element herum (kann auch den Wert "0"=unsichtbar) haben
  • padding (top, right, bottom, left) - Der Innenabstand eines Elements zwischen Inhalt und Rahmen

Das Standard Box Model

Im Standard Box Model - das alle modernen Browser zur Darstellung verwenden - gibt die "width" eines Elementes nur den dem Inhalt eines Objektes zur Verfügung stehenden Platz an, die Abstände (padding, margin) sowie der Rahmen (border) werden zur width aufaddiert und ergeben zusammen die insgesamte Breite, die ein Objekt an Platz zur Darstellung braucht. Im folgenden Beispiel liegt diese benötigte "Gesamtbreite" bei 150 Pixel:

width: 90 Pixel + padding 2x 10 Pixel + margin 2x 20 Pixel + border 2x 0 Pixel = 150 Pixel.

das standard box model

Quirks Mode - MS Box Model

Bis zur Version 5 des Internet Explorers verwendete dieser Browser einen Darstellungsmodus, der das Box Model anders interpretierte als andere Browser: das sog. "MS Box Model". Laut CSS-Spezifikation bezieht sich die definierte Breite (width) auf die Breite des Inhalts. Rahmen (border) und Abstände (padding, margin) werden hinzugefügt und ergeben die Gesamtbreite eines Elements. Im Internet Explorer werden padding und border von der width abgezogen, d.h. die Boxen werden auf einmal schmäler dargestellt. 

 boxmodel im IE quirks mode

Dies mag zwar auf den ersten Blick logisch erscheinen, da eine Box mit fixer Breite immer gleich breit sein sollte, egal wie hoch ihr Innenabstand und Ihr Rahmen ist, aber nachdem alle anderen Browser das Standard Box Model verwendeten, resultierte jedes Element mit festgelegter Breite, Padding und ev. Bordern in einer anderen Darstellung als in den übrigen Browsern. Wenige Internetbenutzer verwenden heute noch diese alte Version des Internet Explorers, doch der alte Darstellungsmodus ist nach wie vor gegenwärtig: in der Form des sog. "Quirks Modes". Dieser Modus existiert in allen Browsern, um HTML-Dateien, bei denen der Browser nicht weiss, um welchen Dokumenttyp es sich handelt (dazu weiter unten noch mehr) anzeigen zu können. Der Quirks Mode ist sehr fehlertolerant, aber nachdem er schon sehr alt ist, nicht immer standardkonform in der Anzeige.

Das heisst konkret für jemanden, der Webseiten entwickelt, dass selbst in der neuesten Version des Internet Explorers Objekte mit einer anderen Breite dargestellt werden als in allen übrigen Webbrowsern, wenn die Seite im Quirks Mode angezeigt wird.

Abb.: Fehlerhafte Interpretation der Elementenbreite im Internet Explorer 5 und allen neueren Versionen im Quirks Mode (oben) und die richtige Darstellung in Mozilla Firefox 1.+

Um in allen Browsern ein einheitliches, browserübergreifendes Layout zu garantieren, konnte man entweder darauf verzichten, einem Element gleichzeitig width UND padding bzw. margin zuzuweisen (die schönste Lösung!) oder es mussten gewisse "Tricks“ angewendet werden, z.B. ein so genannter "Box Model Hack" umging dieses ärgerliche Darstellungsproblem. Der bekannteste und auch wirkungsvollste ist „Tanteks Box Model Hack“ (http://www.tantek.com/CSS/Examples/boxmodelhack.html) oder die deutsche Variante http://www.css-technik.de/css-examples/151_5/

Wenn also das CSS-Layout der Webseite auch noch auf älteren Browsern funktionieren soll, dann müssen in den Stylesheet-Definitionen zusätzliche Einstellungen getroffen werden, welche die falschen CSS-Interpretationen umgehen. Momentan wird Internet Explorer 5, der einzige Browser, der NUR den fehlerhaften Quirks Modus darstellen kann, nur mehr von ca. 0,2% der User verwendet (Stand September 2007). Wenn man diesen Prozentsatz vernachlässigt, reicht es sicherzustellen, dass eine Webseite nicht im Quirks Mode angezeigt wird, um eine gleiche browserübergreifende Darstellung zu erzielen (siehe weiter unten).

Exkurs: Doctype Deklaration von Browsern

Die „Document type declaration“ oder DOCTYPE Declaration in der allerersten Zeile einer HTML-Datei gibt an, welchem Standard und Dokumenttyp die jeweilige HTML-Datei entspricht bzw. welche "document type definition" anzuwenden ist. Dies erfolgt durch einen Verweis auf eine externe Datei oder über direkte Deklarationen. Ab XHTML 1.0 ist es unerlässlich Doctype-Deklarationen als Seiteneinleitung zu verwenden. Macromedia Dreamweaver beispielsweise erstellt diese automatisch bei jedem neuen HTML Dokument.

Eine Doctype Deklaration besteht aus mehreren Informationen und ist nach folgendem Schema aufgebaut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Das Schlüsselwort DOCTYPE leitet den Seitentyp – in diesem Fall ein HTML Dokument – ein. PUBLIC beschreibt, dass es sich um ein öffentlich verfügbaren Standard handelt. W3C beschreibt die Organisation, die den Standard herausgegeben hat - in diesem Fall das "World Wide Web Consortium"; DTD beschreibt die Art der Document Type Description. Anschliessend kann man am LABEL ablesen, in welche (x)HTML-Version die HTML-Datei beschrieben ist, im Beispiel ist es HTML 4.01 Transitional. Darauf folgt die Sprache, in der die Document Type Description verfasst ist, hier "EN" für Englisch. Am Ende der DOCTYPE Anweisung befindet sich noch eine URL zur öffentlich verfügbaren Document Type Definition.
Manche (x)HTML-Versionen haben unterschiedliche Unterarten von Dokumenttypen wie z.B. HTML 4.01 als auch XHTML 1.0:

  • strict
  • transitional
  • frameset
HTML 4.01 strict


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Im HTML-Dokumententyp "strict" werden ausschließlich Strukturierungselemente im HTML-Quelltext zugelassen. Alle anderen Angaben zum Layout und zur Darstellung der Seite sind in Stylesheets auszulagern. Elemente wie z.B. der Tag APPLET sind veraltet und gehören nicht mehr zum Standard (wäre durch das OBJECT-Element zu ersetzen).

 

HTML 4.01 transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Der Dokumententyp "transitional" ("übergangsmäßig") erlaubt den Einsatz von HTML-Attributen und -Elementen, die streng genommen nach den derzeitigen Standards nur über Style-Sheets zu definieren wären. Das liegt daran, dass manche noch eingesetzte Browser wie Netscape 4 mit Style-Sheets nicht richtig umgehen können und deshalb Formatierungen tatsächlich im Text angegeben werden müssen, damit sie interpretiert werden können. Die angesprochene DTD heißt dann "loose" (locker) und, wie der Name schon andeutet, erlaubt sie Abweichungen von den strikteren Standards.

 

HTML 4.01 frameset


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Dieser Dokumententyp ist praktisch identisch mit dem Dokumententyp "transitional", nur werden die HTML- und BODY-Elemente anders definiert. Das BODY-Element wird nicht angezeigt und wird durch FRAMESET ersetzt. Framesets sind nicht mehr zeitgemäß und werden in XHTML 1.1 nicht mehr unterstützt.

 

XHTML 1.0


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML ist im Prinzip wie HTML 4.01, aber auf als XML formuliert (und damit eine valides XML-Datei). Analog zur HTML 4.01 Deklaration gibt’s auch hier drei Doctypes – strict, transitional, frameset.

Rendering Mode - die korrekte Browserdarstellung

Die langen Jahre der uneinheitlichen Darstellung von Internetseiten auf den verschiedenen Browsern gehört schön langsam der Vergangenheit an. Dafür soll der so genannte Rendering Mode – der Darstellungsmodus – sorgen. Dieser steht in unmittelbaren Zusammenhang mit den DTDs, die oben besprochen wurden.

Zum aktuellen Zeitpunkt haben sich drei Darstellungsmodis bei den Browsern etabliert.

1. Quirks Mode

Im Quirks-Modus simuliert ein Browser das Verhalten eines Browsers der 90er Jahre, der die DTDs nur mangel- und fehlerhaft unterstützt und ist deshalb sehr fehlertolerant.

Beispiele für im Quirks-Modus akzeptierte Fehler:

  • Mozilla 1.0, Safari 1.0:
    • Farbangaben ohne Raute (#)
    • Farbwerte in Anführungszeichen
    • Body-Element mit 100% Höhe, ohne vorhandenen Inhalt
    • Zahlenangaben ohne Maßeinheit werden als Pixel interpretiert
  • Internet Explorer 6 PC
    • padding wird nicht auf img-Elemente angewendet
  • Opera 7.0
    • Klassen und IDs dürfen mit Zahlen beginnen
    • Groß- und Kleinschreibung bei Klassen und IDs wird ignoriert

2. Standard (Compliance) Mode

Ein Browser im Standard-Modus versucht die Vorgaben des W3C so gut es geht einzuhalten und das Dokument möglichst konform den Regeln zu interpretieren.
Die im Quirks-Modus aufgeführten "lockeren" Interpretationen wurden aufgehoben, dass bedeutet, dass Farbwerte in Anführungszeichen, RGB Farbwerte ohne #, usw. z.B. ignoriert werden.
Kein Element kann 100% hoch sein. Es ist immer so hoch wie das höchste Kindelement in ihm selbst. Die Höhe kann höchstens mit einer absoluten Einheit festgelegt werden, nicht jedoch mit einer relativen Einheit.

3. Almost Standard Mode

Diesen Modus kennen nur Browser die auf dem Mozilla ab Version 1.0.1 basieren und Safari 1.0. Dieser Modus entspricht im Wesentlichen dem Standard Mode, mit Unterschieden in der Darstellung ein paar weniger Elemente.

Tabelle: Wann schaltet welcher Browser in welchen Modus?

Weil man mit fehlendem bzw. vorhandenem Doctype den Darstellungsmodus steuern kann, nennt man diese Steuerungsmöglichkeit den "Doctype switch". Wie die Bezeichnung bereits vermuten lässt, kann man dies durch die Doctype Deklaration steuern. Das komplette Weglassen des Doctypes bewirkt die Anzeige der (x)HTML-Datei im Quirks Mode. Ein Doctype OHNE Angabe der URL zur DTD bewirkt bei den meisten transitional Doctypes ebenfalls eine Darstellung im Quirks Mode.

Man kann sehr einfach selber testen, wie ein Webbrowser eine Seite anzeigt bzw. welcher Modus verwendet wird: Durch die Eingabe des Javascript Befehls

javascript:alert(document.compatMode);  

in die Adressleiste des Browsers wird entweder "QuirksMode" oder "BackCompat", für den Standardmodus "CSS1compatMode" ausgegeben.

explorer im quirks modeInternet Explorer im Standard Mode

Module, die für die Durchführung vorausgesetzt werden