Padding vergrößert im FF DIV Container

CikoNo1 · 20. November 2005

Hallo Leute,

diese verschiedene Anzeige von Internet Seiten im FF und IE macht micht noch total verrückt

Also ich habe einen Div Container und der hat die feste Breite von 168px und ein padding von 10px. Nun wenn ich eben ein padding von 10px anwende, wird im FF der Div Container um 10px vergrößert, was im IE nicht passiert. Im IE behält er die Breite von 168px aber im FF hat er eine Breite von 168px. Kann mir einer sagen wie ich dies verhindern kann?

MFG

Maik · 20. November 2005

Gemäß dem Boxmodell wird u.a. der Innenabstand padding:10px zur Breiten- / Höhenangabe eines Elements addiert und ergibt so die tatsächliche Boxbreite / -höhe: 168px + 2*10px = 188px. Folglich interpretiert FireFox das Boxmodell korrekt, und IE nicht.

Wie sich das verhindern lässt?

Für das Dokument einen Doctype wählen, der den IE (6.0) nicht in den sog. Quirksmode versetzt und so das Boxmodell, wie seine 5er Vorgängerversionen falsch interpretieren lässt:

HTML:

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

<!-- oder -->

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

Angaben zu width und height nicht mit padding kombinieren, sondern letztere CSS-Eigenschaft an ein Kind-Element übergeben, wie z.B.:

Code:

div#box
{
width: 168px;
}

div#box p
{
padding: 10px;
}

Oder die 20 Pixel für den umlaufenden Innenabstand von der Element-Breite subtrahieren:

Code:

div#box
{
width: 148px;
padding: 10px;
}

Padding vergrößert im FF DIV Container

CikoNo1

Erfahrenes Mitglied

Maik

Neue Beiträge