| box hack | ||||||||||||||||||||
Secondo le specifiche CSS le dimesioni esplicite di un elemento indica l'area interna disponbile per il contenuto, cui verranno aggiunti margini e padding.
Le varie versioni di I.E. hanno comportamenti divergenti: ecco la soluzione.
|
div#box{ | width: 180px !important; width /**/: 200px; padding: 0 10px}
Otterremo sempre un box di area interna 180 con padding laterale di 10 | Infatti: * l'ultima dichiarazione � quella che ha effetto, * !important d� la priorit�, ma IE fino a 5 non la riconosce, * IE6 riconosce !important, ma non legge la riga dopo i commenti.
div#box{ | height: 180px !important; height /**/: 200px; border: 5px solid #CCC; padding: 5px}
Ovviamente ci� vale anche per l'altezza o entrambe.
|
div#box{ | background: url(shadow.png) !important; background: url(shadow.gif)}
L'uso di !important ha molte applicazioni: per esempio, dato che IE fino alla versione 6 non supporta le PNG trasparenti, potremo servigli una GIF.
| |