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