Per chi inizia ad utilizzare i fogli di stile, il box model è la causa dei primi problemi nel cercare di ottenere una presentazione cross browser (cioè simile con i principali browser). Cerchiamo di capire cos’è il box model e perchÃ?© crea tanti problemi.
Cosa sono i box?
Ogni elemento block-level (div, ul, li, p, per esempio) genera un box con quattro aree: un’area destinata ai contenuti e tre aree opzionali (il padding, il border e il margin).
Se il padding è impostato a zero, il perimetro del padding è uguale a quella del contenuto; se il border è impostato a zero (o a none) il perimetro del border coincide con quella del padding, e cosÃ?¬ via. Quindi se sia padding che border che margin sono impostati a zero, i quattro perimetri coincidono.
Quando nascono i problemi?
I problemi causati dal box model possono nascere quando applichiamo ad un elemento block-level di tipo block o list-item un width e un border e/o un padding.
Questo perch�© per le specifiche W3C, come si pu�² vedere dalla seguente illustrazione, il width serve per definire la larghezza del perimetro destinata ai contenuti (il perimetro della prima delle quattro aree, quindi), mentre per Internet Explorer 5 e 6 in modalit� retrocompatibile, il width definisce la larghezza del perimetro del border.
Dal lato pratico il problema è quello descritto nellÃ?â??immagine seguente, e cioè che se definiamo il width, il padding ed il border di un box, avremo, nel caso in cui il box sia visualizzato con un navigatore conforme agli standard, la larghezza totale del box pari a border left + padding left + width + padding right + margin right, mentre, nel caso di visualizzazione con Interenet Explorer, una larghezza pari al solo width.
Lo stesso discorso fatto per la larghezza del box è applicabile all’altezza, anche se i problemi legati all’altezza sono più rari (e forse più gravi, perchÃ?© spesso legati non al box model ma ad un problema concettuale di progettazione, ma non è questo il luogo per parlarne).
Come risolvere?
Solitamente se non specifichiamo nessun valore come width agli elementi block-level, il box generato occupa tutto lo spazio a disposizione. Ora che sappiamo questo e sappiamo che ciÃ?² che ci crea problemi è la combinazione di width, padding e border, abbiamo giÃ? tutti gli elementi per trovare una possibile soluzione per rendere un box cross browser: basta annidare due box, definire in quello più esterno un width pari alla larghezza che si vuole abbia il box, e in quello più interno solo il padding ed il border desiderato.
Quindi:
<html>
<head>
<title>Due box annidati per crearne uno cross browser</title>
<style type='text/css'>
div.esterno {
width: 400px;
}
div.interno {
border: 10px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class=’esterno’>
<div class=’interno’>
Questo è un box cross browser!
</div>
</div>
</body>
</html>
Risultato:
In questo esempio abbiamo inserito del codice HTML inutile, ma spesso, al posto del DIV#interno, si possono usare gli elementi che il DIV#esterno probabilmente conterrÃ? (paragrafi, elenchi, moduli,… ).
L’alternativa è far leggere in modo diverso il foglio di stile a Internet Explorer rispetto che ad un altro browser più rispettoso degli standard. In questo caso bisognerebbe verificare se Internet Explorer 6 (e 5 per Machintosh), in base al DOCTYPE specificato, leggeranno il documento in modalitÃ? standard o retrocompatibile (vedi l’articolo Il doctype switch), e dopo di che scegliere il più adatto tra i tanti metodi possibili. Ad esempio, nel caso solo IE 6 funzioni in modalitÃ? retrocompatibile o nel caso sia IE 6 e IE 5 per Mac funzionino in modalitÃ? standard, l’utilizzo di commenti condizionali puÃ?² essere una buona soluzione, mentre in altre combinazioni di funzionamento opterei per dei filtri con i selettori.
Approfondimenti e risorse correlate:
Documentazione del W3C:
- Box model, il capitolo delle specifiche CSS 2 che tratta il box model.
- Content width: the ‘width’ property, il paragrafo delle specifiche CSS 2 che tratta la proprietÃ? width.
tag: box model, CSS, doctype switch, internet explorer, quirks mode.
post correlati:
- Il doctype switch
- L'allineamento orizzontale degli elementi XHTML con i CSS
- Effetti di attivazione per i link costituiti da immagini
- Selezionare i link di un documento navigato con la tastiera
- Firefox 2, IE7 ed i moduli di ricerca
- Filtri CSS per Opera browser
- Forzare l'aggiornamento della cache per file esterni
4 May 2006 alle 01:05
Avevo comprato 2 libri per saperlo!!!
schitto e sincero! see yaa!
25 September 2007 alle 09:53
[…] paragrafo è un blocco delimitato dai tag <p> e </p>. Il suo allineamento è diverso ed indipendente […]
17 November 2007 alle 15:10
Ciao Terenzani! :-)
Ho un problema che penso sia dovuto al box-model: in IE, il bordo delle immagini, posto ad un padding di 2px e spesso 1px, che è attorno a tutta l’immagine “collassa” sull’immagine stessa.
Detto in parole povere: con FF, il bordo è presente e dista dall’immagine 2px ed è tutto intorno all’immagine. Con IE, il bordo è sempre presente ma fra il bordo e l’immagine non v’è spazio.
Io penso che derivi da un problema con il box model. Tra l’altro ho seguito le istruzioni presenti in Wrapping Text Around ImagesWordpress.org del sito Wordpress.org (le misure del padding, border, ecc.ecc. le ho prese tutte li), ma non continua a non funzionare in IE e “collassa” tutto.
Grazie dell’aiiuto. :-)
19 November 2007 alle 11:22
Ciao Sergejpinka,
il problema è che il padding ad un’immagine funziona solo da Internet Explorer 6 (quindi non funziona da ie5.5 in giù).
Ad esempio, nel tuo blog, il bordo nelle immagine nei tuoi post si vedono bene con IE6.
Se anche con ie6 non si vede come vorresti, potrebbe essere che sta funzionando in modalit� retrocompatibile, puoi risolvere modificando il doctype: http://www.terenzani.it/11/il-doctype-switch-quirks-standars-mode/
ma modificando il doctype potrebbero nascere altri problemi, comunque prova, al massimo aggiusti gli eventuali difetti del layout con un CSS ad hoc per IE6…
Spero di esserti stato utile :-P