Merkwürdiges Verhalten von margin in Firefox und Opera?

[avo]

Hallo

Ich habe hier ein in meinen Augen nicht ganz nachvollziehbares Verhalten bei der margin-Formatierung.

Hier mein HMTL Code:

  
<div id="id1"></div>  
<div id="id2">  
    <div id="id4"></div>  
</div>  
<div id="id3"></div>

Und hier meine CSS dazu:

  
body {  
 margin: 0px;  
 padding: 0px;  
}  
  
#id1 {  
 margin: 0px;  
 padding: 0px;  
 height: 40px;  
 background-color: #DD0000;  
}  
  
#id2 {  
 margin: 0px;  
 padding: 0px;  
 height: 40px;  
 background-color: #00DD00;  
}  
  
#id3 {  
 margin: 0px;  
 padding: 0px;  
 height: 40px;  
 background-color: #0000DD;  
}  
  
#id4 {  
 margin: 10px;  
 padding: 0px;  
 height: 40px;  
 background-color: #DDDD00;  
}

Ich würde jetzt erwarten, dass aufgrund der Angabe margin:10px bei id4 das Grün von id2 wie eine Art Rahmen das Element id4 umgeben sollte.
Die ist jedoch nur im IE der Fall. Im Firefox und Opera ist das Grün von id2 nur links nd rechts von id4 zu sehen. Nach oben hin hat id4 zwar einen 10px Abstand aber es scheint das Weiß vom Body durch und nicht wie erwartet das Grün von id2. Und nach unten zu id3 ist gar kein Abstand zu sehen.

Hat vielleicht jamend eine Idee woran das liegen könnte? Irgendwie kapier ich da die Logik dahinter nicht so ganz.

Mfg
avo

[MudGuard]

Hi,

Ich würde jetzt erwarten, dass aufgrund der Angabe margin:10px bei id4 das Grün von id2 wie eine Art Rahmen das Element id4 umgeben sollte.

Diese Erwartung paßt nicht zur Definition der margins (insbesondere "collapsing margins")

Die ist jedoch nur im IE der Fall.

Ja, daß der IE mit collapsing margins Probleme hat, ist bekannt.

Hat vielleicht jamend eine Idee woran das liegen könnte? Irgendwie kapier ich da die Logik dahinter nicht so ganz.

Dann lies nach, was collapsing margins bedeutet: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

cu,
Andreas

[avo]

Dann lies nach, was collapsing margins bedeutet: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Ah, ok damit jetzt richtig verstanden habe: In meinem Fall wird der Abstand nach oben und unten von id4 genommen und für id2 benutzt, richtig?

MfG
avo