[CSS] margini tra div con Mozilla

[daneel]

Ho inserito nella pagina due div, uno dentro l'altro, definendo uno stile per l'id di quello esterno e uno per il tag di quello interno.

<style type="text/css">
#side {
	width: 240px;
	height: 300px;
	background-color: #8f8f8f;
}

#side div {
	margin: 10px;
}
</style>

<div id="side">
	<div>[img]time_square.jpg[/img]</div>
</div>

Con IE il risultato è perfetto, mentre con Mozilla succede quello che si vede nell'immagine qui sotto:



Lo stesso accade se al posto di un div all'interno utilizzo un tag di paragrafo.
A cosa è dovuto l'errore? Come posso evitarlo?

[daneel]

(Nell'immagine, a sinistra IE6 e a destra Mozilla 1.5.)

[pacovox]

Hai provato così?

<style type="text/css">
#side {
width: 240px;
height: 300px;
background-color: #8f8f8f;
}

.immagine {
margin: 10px;
}
</style>

<div id="side">
<div class="immagine">[img]time_square.jpg[/img]</div>
</div>

[daneel]

Sì, ho già provato. Stesso esito.

[pacovox]

Hai ragione aggiungi "position: absolute;" e dovrebbe andare.

.immagine {
position: absolute;
margin: 10px;
}

[daneel]

#side {
	width: 240px;
	height: 300px;
	background-color: #8f8f8f;
}

#side div {
	position: absolute;
	margin: 10px;
}

Così va tutto bene. Ora dovrei cercare di capire perché