Sovrapposizione padding-margin su IE?

dolce_vanessa

Nuovo Utente
15 Feb 2007
4
0
0
Milano
Ciao a tutti! Mi trovo in una situazione assurda :crying: :

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, p, form, a, ul, li {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>

<div class="red"><div class="green"> </div></div>

</body></html>

Grazie!
baci Vanessa :byebye:
 

dolce_vanessa

Nuovo Utente
15 Feb 2007
4
0
0
Milano
Ti ringrazio della risposta...

Però l'interpretazione sbagliata del box model avviene solo con IE5 e precedenti... il mio problema invece si verifica anche con IE 6 e IE7!

Dove sta l'inghippo? :dipser:

Baci
vanessa
 

lukeonweb

Utente Attivo
5 Mar 2003
5.175
13
38
46
Napoli
www.lucaruggiero.it
Sto facendo caso adesso al codice.

Prova cosi:

<style type="text/css">
html, body, div, p, form, a, ul, li {margin:0; padding:0; border:0;}
.red {width:300px; padding: 20px 0px 0px 0px; background-color:#FF0000;}
.green {width:200px; margin: 20px 0px 0px 0px; background-color:#8bcb2f;}
</style>

Fammi sapere ;)
 

dolce_vanessa

Nuovo Utente
15 Feb 2007
4
0
0
Milano
no, forse mi sono spiegata male:
per esigenze di layout, io HO BISOGNO di margin e padding disposti in quel modo (cioè padding:20px 0 20px 0; e margin:20px 0 0 0), ed ho bisogno che 20+20 faccia 40, come è logico!

Allego immagine: http://mio.discoremoto.alice.it/juspe

Non c'è proprio soluzione? Devo per forza ricorrere ad un hack/conditional comment??

Bacione
Vanessa
 

Discussioni simili