strano comportamento di IE

[awd]

come saprete esiste la proprietà del margin collapsing, cioè quando due div posti uno sopra l'altro hanno un margine inferiore il primo, e superiore l'altro, non viene fatta la somma dei due ma prevale il margine maggiore!
Ebbene ho notato una strano comportamente di IE (probabilmente già noto) che applica questa regola anche ai padding e margini insieme!
mi spiego: se ho un div contenitore con impostato un padding superiore, e al suo interno ho un div con impostato un margine superiore, il browser non renderà la somma dei due valori (come Opera e Mozilla) bensi visualizzerà sono il maggiore dei due!
sapete se esiste qualche rimedio?

[andrea.paiola]

sfrutta qualche altro bug di Internoz Exploder per fornirgli una parte di CSS diverso...

[awd]

di contro c'è un problema che insorge con gli altri browser: se elimino il suddetto padding (che poniamo sia di 10px) portandolo a 0px e aumento il valore del margine del div interno da 5 a 15px (quindi in teoria non dovrebbe cambiare nella nella resa della pagina) IE renderà 15px di distanza dal bordo superiore, ma Mozilla e Opera non mostraranno alcun margine!!

[andrea.paiola]

non c'ho capito 'na mazza
metti online una pagina che ci capiamo meglio...

[awd]

Ok! se guardi l'index del mio sito con mozilla o opera vedrai che il link "entra" è attaccato al bordo superiore della zona grigia, con IE è invece distaccato di 15 pixel! alla scritta è infatti associata una classe con questi parametri:


font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
margin: 15px 0px;

dove sbaglio?

[awd]

up :rollo:

[andrea.paiola]

mi sembra il classico errore del box model
leggiti il box model hack
se non risolvi ancora o riposti qui o mi contatti in PVT...

[awd]

non credo che centri... e il comportamento degli altri browser come lo spieghi? magari ti mostrerò qualche esempio ad hoc che sia più esplicito!

[andrea.paiola]

allora ho guadato il tuo codice:
html:

<div id="inferiore">
    <div class="grande blugrassetto">.:: ENTRA ::.</div>

css:

#inferiore {
	width: 100%;
	height: 26%;
	background-color: #CCCCCC;
	margin: 0px;
	padding: 0px;
}

e

.grande {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333333;
	margin: 15px 0px;
}

.blugrassetto {
	font-weight: bold;
	color: #006699;
}

non vedo però una classe "grande blugrassetto" e quindi penso che hai tentato di assegnare 2 classi ad un solo tag html: non si può fare!

[awd]

VVoVe: non si può fare???
ma come, l'ho sempre fatto e ha sempre funzionato!! :master:
http://www.html.it/css/guida_css_09.htm