Non ho una grande esperienza ed ho da poco abbandonato la formattazione tramite tabella e html per passare a quella con i tag <div> ed i fogli di stile. E' sempre da poco che mi preoccupo di scrivere codice crossbrowser e di testare quello che faccio con più drowser.
Testando con mozilla (ad esempio) il mio primo lavoro fatto con tali tecniche, mi sono reso conto che, nonostante il codice fosse conforme agli std w3c, il layout veniva stravolto.
Questo è dovuto ad un bug di ie nell'interpretare i fogli di stile: ie interpreta il width da bordo a bordo qualunque sia il padding ed il border impostato al box (<div>).
Per intenderci:
codice:
.esempiodiv{
border: 20px solid black;
padding: 20px;
width: 100px;
}
secondo le specifiche dovrebbe avere una estensione orizzontale pari a width + padding + border, quindi 100+20+20+20+20= 180px
per ie non è così, per lui l'estensione è 100px (data dal width) e basta!
Come risolvere questo?
Il metodo proposto dall'articolo che ho postato è quello di definire il width in questo modo:
codice:
#divcrossbrowser{
width: 760px;
\width: 780px;
w\idth: 760px;
padding: 10px;
}
e, sempre citando l'articolo:
"La prima è per i browser che non applicano l'escape ma implementano correttamente il Box Model (tipo Opera 5). La seconda è per Explorer 5.x (e 6 N.d.R.): come si vede contiene un valore di 780px, in quanto alla larghezza definita con width dobbiamo sommare i 20px di padding dei lati sinistro e destro. La terza è per i browser standard compliant i quali sovrascriveranno il valore di 780px con la regola più vicina."
ma poi aggiunge:
"E così abbiamo sistemato i browser più adoperati. Se il vostro target contiene anche Netscape Navigator 4, dimenticate quello che abbiamo detto finora. Explorer 5 ha problemi nell'interpretare una regola con l'escape, mentre il buon Navigator appena vede un tentativo di escape, salta a pie' pari tutto il foglio di stile! Occhio, dunque."
Vediamo allora come implementare il padding ed il border senza creare problemi con i vecchi browser (qui inizia la farina del mio sacco, @iguane 
)
codice:
.esempiodiv{
width: 180px;
}
.dentroesempiodiv {
padding: 20px;
border: 20px solid black;
}
per poi andare a scrivere:
codice:
<div class="esempiodiv">
<div class="dentroesempiodiv">
ok, abbiamo fatto la nostra area crossbrowser con padding, e
border di 20px e con un'estensione orizzontale di 180px, spero :)
</div>
</div>
Un altro "problema" è centrere il box, che, stando alle specifiche, andrebbe risolto così:
codice:
.esempiodiv{
width: 180px;
margin-left: auto;
margin-right: auto;
}
facile, no? no! ie non lo supporta. Poco male, "basta" scrivere un po' di codice errato in più:
codice:
body {
text-align: center;
}
questo fa allineare il box al centro con ie (ma anche il testo della pagina).
Concludendo:
codice:
body {
text-align: center;
}
.esempiodiv{
width: 180px;
}
.dentroesempiodiv {
padding: 20px;
border: 20px solid black;
text-align: left;
}
<div class="esempiodiv">
<div class="dentroesempiodiv">
ok, abbiamo fatto la nostra area crossbrowser centrata orizzontalmente
con padding e border di 20px, testo allineato a sinistra
e con un'estensione orizzontale di 180px, spero :)
</div>
</div>
Ho sbagliato qualcosa? Volete aggiungere altro?
Forse ora è una vera pillola 
:metallica
(se leggete l'articolo che ho postato approfondisce altre proprietà 
)
ciao 
Permessi di invio
Rispondi quotando