Uschi Renziehausen: Boxmodel und XHTML: warnender Nachtrag

Beitrag lesen

Gugugg,

dh, ich schreibe oben weiter mit html4.01 und schreibe aber in xml?

Nein, du gibst in jedem Falle einen XHTML-Doctype an, z.B.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ohne Angabe eines XHTML-Doctypes rennt der IE im sogenannten Quirksmode und verwendet ein vom Standard   und damit den ordentlichen Browsern abweichendes Boxmodel. Beispiel:

div.box {
  width: 200px;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid #000000;
}

Im IE ist dein div.box im Quirksmode incl. der 20px für das Padding und die 4px für die Border links und rechts 200px breit, bei allen anderen werden 224px verbraucht. Sobald du einen XHTML-Doctype verwendest, hat sich zumindest dieses Problem für IE >= 5.5 erledigt, und auf den IE 5.0 würde ich an deiner Stelle zumindest solange pfeifen, bis du ordentlich CSS kannst. Das Ding kann einen nämlich in den Wahnsinn treiben.

Und nun die Sache mit der XML-Deklaration. Diese kannst du zusätzlich VOR dem Doctype angeben, e.g.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Das dumme ist nur: Sobald du das tust, geht der IE unweigerlich wieder in den Quirksmode, und ich denke nicht, dass du die XML-Deklaration brauchst.

dh, wenn ich xhtml benutze, dann wird in allen browsern (neueren) ohne fehler alles gleich angezeigt?

ALLES gleich nicht, aber doch im Wesentlichen. Die unterschiedlichen Browser haben unterschiedliche Ansichten über die Standardzeilenhöhe, die margins und paddings von Absätzen, Listen usw. usf. Du bist vielleicht gut beraten, wenn du dir mal die Standardvorgaben von Mozilla/Firefox anguckst. Die findest du auf deinem Rechner hier: Programm_Verzeichnis_Firefox/res/html.css (nur angucken, nicht drin rummalen). Von den Werten dort ausgehend kannst du dann für alle Browser einheitlich definieren, wie die Dinge aussehen sollen.

Ein paar Probleme verbleiben für den IE, der auch unabhängig von der Boxmodelfrage so einige Bugs hat, besonders wenn es um float geht. Gehe so vor: Räume deinen Code auf, prüfe, wie es in Firefox oder Opera aussieht. Erst dann ziehst du den IE zu Rate. Sollten sich da Abweichungen ergeben, hilft der folgende Hack.

In der CSS zuerst die Angaben für die guten Browser notieren, dann einzelne Werte für den IE überschreiben, z.B.

p {font-size: 0.9em} /* Das hier lesen alle */
* html p {font-size: 0.8em} /* Diese Zeile liest nur der IE */

Liebe Grüße, Uschi