Firefox: padding macht div breiter

[Herb]

Servus!

Klingt der Titel irgendwie blöd? Sorry, mir ist grad nichts besseres eingefallen. ;)

Also folgende Problematik:

Ich habe ein div definiert:

<div class="menu"><p>Überschrift</p></div>

menu { width: 180px; padding: 10px;}

IE6 und Opera8 zeigen den div-Bereich "richtig" an, also 180 Pixel breit mit einen Innenabstand von 10 Pixel vom Rand zum Inhalt. Firefox macht es etwas anders: Er macht den div-Bereich einfach 20 Pixel breiter: 180px + 10px + 10px.

Was kann man da tun?

[Candid Dauth]

Heißa, Herb,

IE6 und Opera8 zeigen den div-Bereich "richtig" an, also 180 Pixel breit mit einen Innenabstand von 10 Pixel vom Rand zum Inhalt. Firefox macht es etwas anders: Er macht den div-Bereich einfach 20 Pixel breiter: 180px + 10px + 10px.

In SelfHTML gibt es seit Neuestem einen interessanten Artikel über das CSS-Box-Modell. Dort wirst du dahinter kommen, dass die Interpretationsweise von Firefox die richtige ist. Opera und Internet Explorer würden sich genau so verhalten wie Firefox, wenn dein HTML-Code keine Syntax-Fehler enthielte und sie damit in den Standards Mode wechseln würden.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[MudGuard]

Hi,

menu { width: 180px; padding: 10px;}
IE6 und Opera8 zeigen den div-Bereich "richtig" an, also 180 Pixel breit

Das ist aber nach CSS-Spezifikation falsch.

width im Sinne von CSS ist die Breite des content.
Padding, border und margin liegen außerhalb.

Daß der IE das falsch macht, ist schon lange (unter dem Namen box model bug) bekannt.

Die Geckos verhalten sich korrekt.

Firefox macht es etwas anders: Er macht den div-Bereich einfach 20 Pixel breiter: 180px + 10px + 10px.

So wie es die CSS 2.0 / CSS 2.1 Spezifikation vorsieht.
Works as designed.

Was kann man da tun?

Über Doctype-Switching IE und Opera in einen standardnäheren Modus umschalten.

Ersatzweise mal testen, wieweit box-sizing von Geckos schon unterstützt wird.

cu,
Andreas

[Herb]

Das könnte am Doctype liegen? Der ist bisher bei mir nicht definiert. Welchen würdest du empfehlen?

[MudGuard]

Hi,

Das könnte am Doctype liegen? Der ist bisher bei mir nicht definiert. Welchen würdest du empfehlen?

Den, der zum Dokument paßt.

cu,
Andreas

[Herb]

Natürlich. Danke, funzt. :)

[Ashura]

Hallo Herb.

Klingt der Titel irgendwie blöd? Sorry, mir ist grad nichts besseres eingefallen. ;)

Man kann sich schon vom Titel her denken, wo der Fehler liegt, also: gute Wahl.

Ich habe ein div definiert:

<div class="menu"><p>Überschrift</p></div>

menu { width: 180px; padding: 10px;}

IE6 und Opera8 zeigen den div-Bereich "richtig" an, also 180 Pixel breit mit einen Innenabstand von 10 Pixel vom Rand zum Inhalt.

Nein, das ist leider nicht „richtig“.

Firefox macht es etwas anders: Er macht den div-Bereich einfach 20 Pixel breiter: 180px + 10px + 10px.

Das ist auch die dem Boxmodell entsprechend korrekte Umsetzung.

Was kann man da tun?

Befasse dich mit dem [Wikipedia: Quirks-Modus] (konkret: verlasse ihn) und dem Boxmodell-Bug.

Einen schönen Samstag noch.

Gruß, Ashura