Wer kennt es nicht, die ständige, lästige Browser Unterschiede beim entwickeln von Webseiten. Im Firefox sieht alles super aus, der IE7 stellt es mittlerweile auch gut da doch unser alter Freund der IE in die Tonne kloppen 6 hat wiedermal keine Ahnung.
In einem anderen Artikel hab ich euch über die CSS Hacks informiert. Das ist natürlich ein Weg um es wieder gerade zu biegen, vielleicht auch der coolste 
aber nicht der beste, der beste Weg ist valides XHTML zu verwenden und sich das Box Modell zum Nutzen zu machen. Im “Standards Compliance Mode” sieht es schon besser aus als im “Quirks Mode“.
Hier eine Grafik von SELFHTML zum Box Modell:
Damit das Box Modell auch korrekt zum Einsatz kommt brauchen wir einen gültigen Doctype.
Am besten eignet sich hier der XHTML Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Es gibt noch andere Doctypes, der XHTML 1.0 ist aber der am “einfachsten” zu nutzende.
Vor diesem Doctype darf kein PHP Code oder sonstige Zeichen sein, im IE6 verursacht das einen Bug der diesen Browser wieder in den ungewollten Quirks Mode stellt.
Mit diesem XHTML Doctype befinden wir uns im “Standards Compliance Mode” und können die vollen Züge des Box Modells genießen. Dabei ist zu bedenken, wie in der Grafik oben dargestellt, dass sämtliche Angaben wie margin, padding oder border auf die eigentliche Größe drauf gerechnet werden.
Haben wir also ein DIV mit einer Länge von 100px und geben diesem ein padding von 10px links und rechts, vergrößert sich das DIV gemäß des Boxmodells um 20px, der DIV Bereich ist dann also 120px groß.
Der richtige Doctype ist eines der wichtigsten Inhalte einer HTML Datei, das oben genannte Beispiel sollte als Grundlage genutzt werden. Dann habt ihr nicht mehr ganz so viele Probleme mit der unterschiedlichen Darstellung in den verschiedenen Browsern.
Um valide zu bleiben muss dann auch in XHTML geschrieben werden, die Syntax unterscheidet sich hier im Gegensatz zu HTML.
Schaut euch die Links an die ich in diesem Artikel eingebaut habe um mehr über die verschiedenen Begrifflichkeiten herauszufinden.
Hier noch interessante externe Links zum Thema Box Modell:
Einen Kommentar schreiben
Du musst eingeloggt sein, um einen Kommentar zu schreiben.
Letzte Kommentare