Sovrapposizione padding-margin su IE?

**dolce_vanessa** · 13-02-2007, 17:24

Ciao a tutti! Mi trovo in una situazione assurda:

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

Sembra che con Explorer 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:

<!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

**enzo845555** · 14-02-2007, 12:39

Oh mia dolce Vanessa eccoti il codice da te richiesto!

codice:

<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; _margin:40px 0 0 0; background-color:#8bcb2f;}
</style>

Usa " _margin:40px 0 0 0; " in modo che lo interpreti solo IE e non Firefox...

**enzo845555** · 14-02-2007, 12:43

Il "_" prima della proprietà css è un grande "hack" molto utile in alcuni casi...

**dolce_vanessa** · 15-02-2007, 11:37

Grazie mille!
Ma prima di usare hack, workaround o conditional comments, la mia domanda era: si tratta di un BUG specifico di IE oppure della mia "incompetenza" ??

Vorrei capire esattamente dove sta il problema...

Baci
Vanessa

**mucu** · 15-02-2007, 11:42

è normale mi sembra che le distanze collassano e prevale l'elemento superiore o genitore

**enzo845555** · 15-02-2007, 11:57

E' questione di feelinggggg.....

.....è questione di "Box Model"...
sicuramente non hai sbagliato tu dolce Vanessa, ma sono i browser che sono fatti male!

http://css.html.it/articoli/leggi/34...l-box-model/1/

**dolce_vanessa** · 15-02-2007, 12:09

Mi dispiace fare la saputella

, ma a collassare sono i margini contigui, non i padding!
E poi i problemi con il box model ci sono solo con IE5 e precedenti... qui si parla di IE7!

Nessun'altra idea??

Vanessa

**geniettox** · 15-02-2007, 15:29

E' vero, ho notato anche io!!

VVoVe:
io non so cosa sia, mi sa che ci vuole una risposta autorevole...

Chi è il guru della situazione qui???

**dolce_vanessa** · 15-02-2007, 16:08

Se può essere utile, allego un'immagine della situazione in vista sviluppo...
http://mio.discoremoto.alice.it/juspe

Non so più come fare, è indispensabile che io usi padding e margin in quel modo... e vorrei evitare hack.
Come faccio?? :master:

Help!!!

Vanessa

**enzo845555** · 15-02-2007, 16:41

Prova questo e fammi sapere...ciao

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//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;}
.contRed {width:300px; background-color:#FF0000;}
.red {padding:20px; margin:20px 0 0 0;}
.green {width:200px; margin:20px 0 0 0; background-color:#8bcb2f;}
</style>

</head>
<body>
<div class="contRed">
	<div class="red">
		<div class="green"></div>
	</div>
</div>

</body></html>

Discussione: Sovrapposizione padding-margin su IE?

Strumenti discussione

Ricerca discussione

Visualizza

Sovrapposizione padding-margin su IE?

Permessi di invio