Il box model di IE5/Win
Il box model dei CSS permette di definire dei blocchi rettangolari con specifici valori per la larghezza e l'altezza della sezione contenuti, del padding, dei bordi, dei margini. Purtroppo, IE5 per Windows non ha una interpretazione corretta del box model. E' molto importante conoscere il problema, essendo il box model uno dei migliori strumenti offerti dai CSS ed essendo IE5 per Windows ancora il browser più diffuso.
Il box model viene specificato impostando la largezza e l'altezza dei contenuti, il padding, dimensioni e stile del bordo e il margine. Il padding è lo spazio fra i contenuti e il bordo, mentre il margine è lo spazio fra il bordo e gli altri contenuti della pagina.
Quando, con la proprietà 'width', si specifica la larghezza del box, si specifica la larghezza dell'area che conterrà il testo del box. La larghezza del box fino al bordo è la somma della larghezza specificata con width + ampiezza del padding + spessore del bordo (vedi immagine successiva).
![[immagine: Rappresentazione grafica del box model secondo lo standard CSS, sono illustare le varie proprietà]](../../images/tutorial/IE5_box_model/standard.gif)
Questo secondo gli standard CSS.
IE5 per Windows (non IE5 per Mac) considera la larghezza specificata con width, come la larghezza del box fino al bordo. Bordo e padding vengono scalati dalla larghezza specificata (vedi immagine successiva).
![[immagine: Rappresentazione grafica del box model secondo l'interpretazione di IE5/Win, sono illustare le varie proprietà]](../../images/tutorial/IE5_box_model/ie5.gif)
Si consideri il seguente codice XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Esempio</title>
<style type="text/css">
<!--
.box {
width:200px;
border:5px solid #900;
padding:7px;
margin:10px
}
-->
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy ...
</div>
</body>
</html>
Il risultato deve essere un box largo 200px + [2 x 5px] + [2 x 7px] = 224px, cioè la larghezza è data dai 200px dei contenuti a cui devono essere sommati 5px per ognuno dei bordi laterali e 7px + 7px per il padding. Un browser che interpreti correttamente il box model (ad es. IE5/Mac, IE6, NN6, Moz) mostrerà un box largo 224px. IE5 per Windows, invece, mostrerà un box largo 200px, come specificato con width. Un esempio è riportato nella figura successiva.
![[immagine: Risultato dell'esmpio su IE5/Win e su un browser standard]](../../images/tutorial/IE5_box_model/confronto.gif)
Come si vede, in IE5 per Windows il box risulta più stretto. Impostare il layout di un sito senza tenere conto dell'errata interpretazione del box model da parte di IE5/Win può portare a risultati non soddisfacenti.
Per ovviare al problema sono possibili due alternative: la tecnica di Tantek oppure è possibile specificare la larghezza attraverso un'apposita classe.
Tecnica di Tantek
<style type="text/css">
<!--
.box {
width:224px;
border:5px solid #900;
padding:7px;
margin:10px
voice-family: "\"}\"";
voice-family: inherit;
width:200px;
}
-->
</style>
Dapprima si specifica una larghezza pari alla larghezza dei contenuti + l'ampiezza del padding + l'ampiezza dei bordi, nel nostro esempio 224px, come richiesto da IE5/Win. Successivamente, utilizzando la tecnica di Tantek, si fornisce la larghezza corretta, nel nostro esempio 200px, con un comando che IE5/Win non è in grado di interpretare a causa di un bug. Per maggiori dettagli sulla tecnica di Tantek è possibile leggere l'articolo "Come nascondere i CSS ai browser".
Specificare la larghezza attraverso un'apposita classe
Se specificassimo solo la larghezza, lasciando i valori di default (0px) per il bordo e il padding, non ci sarebbe differenza di interpretazione fra IE5/Win e un browser che interpreti con correttezza il box model. Ciò può suggerirci un metodo per impostare box che appiano correttamente anche su IE5/Win. Il codice è quello di seuito riportato.
[...]
<style type="text/css">
<!--
.box {
width:224px;
}
.content {
border:5px solid #900;
padding:7px;
}
-->
</style>
[...]
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy ...
</div>
</div>
[...]
Nella classe '.content' vengono specificati il padding e il bordo, nella classe '.box' viene specificata la larghezza dei contenuti. In questo modo, il contenuto sarà di 200px sia su IE5/Win sia su gli altri browser.
L'importanza del DOCTYPE
A questo punto è necessario soffermarsi sull'importanza di specificare il DOCTYPE della pagina. Se non ne viene specificato nessuno, IE6 emula IE5 riproponendo l'errata interpretazione del box model. In questo caso la tecnica di Tantek non funzionerebbe, poiché basata su un bug di IE5/Win non presente in IE6. Dei template per la corretta impostazione di documenti (X)HTML sono disponibili presso le pagine del Web Standard Project.
File correlati
Articoli correlati:
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
