✔ DIV-Breite in FF und IE unterschiedlich berechnet?

[Eiszwerg]

Hallo liebste Community,

ich habe hier mal eine grundsätzliche Verständnisfrage zu stellen.
Vorher jedoch mein Vorhaben in einer kurzen Schilderung:

Ich möchte in einem Haupt-Div folgende Dinge untereinander in jeweils einem eigenen DIV einbinden:
-die Kopfgrafik (800x200px)
-eine Navigation
-den Text des angewählten Punktes

Das Haupt-Div hat:

<div style="padding:0px; marign:0px;">

Danach folgt das Div "head" mit:

width               : 800px;
height              : 200px;
margin              : 0px;
padding             : 0px;

Anschliessend das Div "navi":

width               : 800px;
height              : 20px;
background-color    : #eeeeee;
background-image    : url(../gfx/back_main.jpg);
padding             : 5px;
text-align          : center;
font-weight         : bold;

Und zu guter Letzt der container für den Text:

background-color    : #eeeeee;
background-image    : url(../gfx/back_main.jpg);
width               : 800px;
padding             : 5px;
text-align          : left;

Zusammengebastelt ist es wie folgt:

<div style="padding:0px; marign:0px;">
<div class="head">
 <img ... />
</div>
<div class="navi">
... ... ...
</div>
<div class="text">
... ... ...
</div>
</div>

Das Ergebnis ist jedoch absoulut nicht das, was ich erwartet habe:
Im FireFox gucken sowohl das Div "navi" als auch "text" nach rechts unter dem "head" hervor. Es ist keine bündige Linie.
Im IE hingegen passt es wunderbar.

Nun die Vermutung und eigentliche Frage: hängt das damit zusammen, dass ich bei "head" kein padding von 5px verwende?
Wenn ich das nämlich änder, dann lappt das div "head" über den Rest nach rechts.

Ich bekomme langsam echt graue Haare von dem Rumprobieren und hoffe, dass mir jemand abschliessen erklären kann, wo der Fehler liegt und wie man ihn behebt.

Mein Dank sei Euch gewiß

 

[Gumbo]

Der Internet Explorer berechnet Breiten und Höhen bis zur Version 7 anhand eines anderen Box-Modell als das des W3C, das von allen anderen Webbrowsern verwendet wird. Während beim W3C-Modell Rahmen (border) und Polsterung (padding) zur darzustellenden Breite und Höhe addiert werden, werden beim Internet-Explorer-Modell diese Werte vom verfügbaren Inhaltsbereich subtrahiert. Ein Element mit einer Breite von 100 Pixeln, einer Polsterung und Rahmenstärke von jeweils 5 Pixeln wird nach dem W3C-Modell also 120 Pixel breit dargestellt, während der Internet Explorer es exakt 100 Pixel breit darstellt dafür aber den Inhalt einengt.

Probier’s ruhig mal aus:

<div style="width:100px; padding:5px; border:5px solid; background-color:#fe0"><div style="background-color:#fff">Inhalt</div></div>
<div style="width:120px; background-color:#f00">120px</div>

 

[Eiszwerg]

Und wie schaffe ich es nun, dass beide Versionen gleich aussehen?
Hab mal von irgendwelchen "hacks" gehört.

Edit:
Äh... habe Dein Code-Beispiel wohl falsch interpretiert. Das soll ein Lösungsansatz sein, oder?

 

[Gumbo]

Das ist nur ein Beispiel zur Veranschaulichung der Modelle.

Ich würde jedoch die Breite durch das Elternelement festlegen:

<div id="wrap">
	<div id="head">a</div>
	<div id="nav">b</div>
	<div id="content">c</div>
</div>

#wrap {
	width: 800px;
	padding: 0;
	margin: 0;
}
#head {
	height: 200px;
	background-color: #f00;
}
#nav {
	height: 20px;
	padding: 5px;
	background-color: #0f0;
}
#content {
	padding: 5px;
	background-color: #00f;
}

Dadurch kann die Polsterung beliebig geändert werden ohne dass die Breite davon beeinflusst wird.

 

[Eiszwerg]

Wenn ich das so mache, wie in Deinem Beispiel genannt, dann schiebt er mir alle DIVs nebeneinander :suspekt:

Nochmal EDIT:
Hab nun als Breitenangaben

 width: 100%

genommen. Passt 1A. Ich bedanke mich für die rasche Hilfe

 

[Maik]

Hi,

ansonsten könnte es eventuell daran liegen, dass du für das Dokument keinen Doctype deklariert, oder einen Dokumenttyp gewählt hast, der den IE in den Quirksmode versetzt, und er deshalb das Boxmodell falsch interpretiert. Siehe hierzu auch Workshop Doctype-Switch Teil1 und Workshop Doctype-Switch Teil 2.

Wenn du aber eine browserübergreifende Lösung gefunden hast, dann markiere das Thema bitte auch als erledigt. Vielen Dank!