Sovrapposizione padding-margin su IE?

dolce.vanessa

Sovrapposizione padding-margin su IE?

Ciao a tutti! Mi trovo in una situazione assurda :bho: :

Ho due div annidati, quello esterno con padding:20px; quello interno con margin-top:20px;

Sembra che con IE (ma non con Firefox) il margine superiore di quello interno e il padding inferiore di quello esterno si sovrappongano, generando uno spazio tra i due bordi di 20px, invece di 40px, come sarebbe corretto.

C'è qualcosa che mi sfugge, sono rimbecillita improvvisamente o cosa?
Mi date una mano per favore?

Allego il codice incriminato:
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">
html, body, div {margin:0; padding:0; border:0;}
.red {width:300px; padding:20px; background-color:#FF0000;}
.green {width:200px; margin:20px 0 0 0; background-color:#8bcb2f;}
</style>
</head>
<body>

</body></html>[/html]Grazie!
baci Vanessa