Box Model e FireFox

[LuigiNasto]

Ciao a tutti,

ho un dubbio su come gestiscono il BoxModel FireFox e Explorer.

Io ho due div con questa struttura:

(X)HTML

<div id="extra"> 
    <div id="shoutbox"> ...testo...</div> 
</div>

Il problema è che quando setto via foglio di stile la width del div con id = "shoutbox" con questo codice:

[CODE]
DIV#ShoutBox {
position: relative;
width: 150px;
padding: 3px;
border: 1px solid rgb(138,167,210);
}
[CODE]

Explorer mi crea un box di 150pixel misurati da bordo a bordo, FireFox mi crea un box di 158 pixel misurati da bordo a bordo. In sostanza è come se FireFox assegnasse quei 150 pixel solo al contenuto!

come posso fare per avere la stessa resa su entrambi i browser?

Grazie mille a tutti, Luigi

[pacovox]

Le specifiche dicono che il box model è formato da width o height + padding + bordi.
Solo IE 5.5 e precedenti o IE6 in modalità retrocompatibile applicano il box model in modo errato, per loro width o height comprendono anche padding e bordi.
Da notare che IE per Mac si comporta nel modo corretto.
Le soluzioni sono tre:
1) Servi ad IE tramite commenti condizionali un css a lui dedicato.
2) "Sporchi" con un hack il css principale.
3) Usi due box, nel primo definisci la larghezza, nel secondo(contenitore) padding e bordi.

Personalmente preferisco la prima soluzione in quanto permette di tenere il css pulito e senza hack.
Difficilmente si può prevedere come si comporterà IE7 con tutti gli hack(non solo per il box model) presenti attualmente.

Commenti condizionali:
http://msdn.microsoft.com/library/de...omment_ovw.asp

hack box model(uno dei tanti):
http://www.ecologiadeisitiweb.net/blog/hack-per-ie5xwin