[IE e Firefox] contrasti tra margin e padding

[awd]

Premessa: Sto verificando le cose nell'istante in cui le scrivo qui sul forum

Ho un div con certo valore di padding-top e all'interno un paragrafo che ha definito a livello generico un margin-top.
In firefox lo spazio superiore che si viene a creare è la somma del padding e margin, mentre IE prende come valore quello maggiore! Ora, se non sbaglio la soluzione corretta è quella di FF (c'era da dubitarne?) perché il "margin-collapsing" non dovrebbe avvennire tra un padding e un margin, ma solo tra margini!

Altro caso
A lato dello stesso div ne ho un secondo flottato! In questo non è definito il margine per i paragrafi, quindi si attua quello di default! Se metto il padding-top del div a zero in Firefox il primo P ha lo stesso un margine superiore (15/16px), in IE no, è nullo! In questi casi mi pare che il comportamento standard dovrebbe essere che il primo paragrafo ha margine superiore nulla, a meno che Firefox è così intelligente da capire che lì deve cmq metterci un margine!

Caso opposto
In un'altra pagina invece ho il container con margin-top=12px, e all'interno di un div interno al container ho dei paragrafi con margin-top=15px!
in Firefox lo margine superiore del primo P è 15px in IE è 27px! Quindi qui FF attua il margin collapsing e IE no! quindi la domanda è sempre è la stessa di prima: FF è così furbo da capire da solo la situazione? boh!

Altro caso
Torniamo ora alla prima situazione. se invece del padding-top del div setto il margin-top con lo stesso valore si ripete quanto visto nell'ultimo caso esaminato: Firefox fa il margin-collapsing, IE fa la somma dei due (è proprio stupido!)
Avviene però un fatto strano: Come detto a lato di questo div ce n'è uno flottato, e il valore del margin-top applicato all'altro div ha effetto anche su questo che viene ad avere lo stesso mergine superiore, cosa che con IE non avviene! Questa cosa non la capisco, il div flottato non dovrebbe dipendere dal div adiacente, quindi la versione corretta mi sembra quella di IE, a meno che non ho considerato qualcosa.

Ebbene non so se qualcuno avrà voglia di leggersi tutta sta roba e soprattutto che riesca a capirla solo leggendo. In ogni caso spero che qualcuno mi risponda e mi aiuti ad analizzare i fatti!

[Mich_]

> In firefox lo spazio superiore che si viene a creare è la
> somma del padding e margin, mentre IE prende come valore
> quello maggiore!
A me risulta (ma non posso provarlo: sotto linux non c'e` IE) che IE prenda solo il margin, mentre il padding viene a far parte della dimensione del blocco.

> Ora, se non sbaglio la soluzione corretta è quella di FF
Non e` questione di "correttezza", ma di standard (ovvero: convenzione). Il W3C (di cui anche IE fa parte) ha deciso che la soluzione da adottare e` quella che poi ha implementato FF.

Per gli altri casi non ho analizzato.
Lascio l'onore/onere dei test e dell'interpretazione ad altri.

Comunque la strada da te intrapresa non e` inutile. Ti pregherei di postare qui eventuali altri risultati (e magari anche le condizioni di test, cosi` che i tuoi risultati siano verificabili da altri - vedi "metodo scientifico").
Posta sempre anche il browser e la piattaforma con cui testi: versioni diverse dello stesso browser possono avere comportamenti diversi.

[andrea.paiola]

mi sembrano esempi classici di errata interpretazione del box model da parte di IE... insomma niente di nuovo però è senz'altro utile: grazie awd!

[thomas_anderson]

Ho potuto sperimentare di persona quanto scritto da awd, in Internet Explorer SP1. Addirittura IE fa questo: avevo evidenziato con un border due div, uno di #nav con float ed il suo opposto #content. Ebbene, nonostante la larghezza del div content invadesse #nav, solo Firefox mostrava lo straripamento. IE continuava a mostrare i due div adiacenti, combacianti, come se nulla fosse.