TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Modèles de boîtes

Selon le mode standard

La propriété "width" représente la largeur du contenu et "height" sa hauteur.

La largeur totale de la boîte, retrait et bordure comprise se calcule ainsi :

Selon le modèle Microsoft

Selon le modèle Microsoft mis en oeuvre dans les versions 5.x Windows la proprété "width" représente la largeur totale de la boîte. La largeur du contenuse calculant ainsi :

 

Comparaison

Considérons les deux boites suivantes qui ont une même largeur totale selon le modèle standard :

width : 400px;

padding:0px;

border:0px;

margin:20px;

background-color:#FFFF99;

 

width : 300px;

padding : 40px;

border:10px #9999CC outset;

margin:20px;

background-color:#FFFF99;

Dans Explorer version 5.x pour Windows les deux boites n'ont pas la même largeur totale. 400 pixels pour la première et 300 pixels pour la deuxième.

Solution

La solution consistant à détecter le navigateur cible et lui servir une feuille de style adaptée spécifique est un recours qui va à l'encontre de l'esprit des standards.

Aussi une solution utilisant exclusivement les standards et exploitant un bug de Internet Explorer a été proposée par Çelik Tantek , qui a participé à la conception du moteur de rendu d'Explorer (Tasman) d'une part et a travaillé sur la spécification CSS au sein du W3C.

Le principe

Le principe consiste en la définition de 3 propriétés pour la boite :

La mise en oeuvre

.boite

{

background-color:#FFFF99;

margin:20px;

padding : 40px;

border:10px #9999CC outset;

width: 400px; largeur totale pour IE 5.x

voice-family: "\"}\""; pour cacher la suite à IE 5.x

voice-family:inherit; pour rétablir la valeur de la propriété

width: 300px; pour les navigateurs conformes

}

Complément

Une petite difficulté supplémentaire est due à certains navigateurs, en particulier Opera 5 qui utilise un modèle de boîte standard, mais partage le bug d'Explorer. On rajoute un sélecteur CSS2 (non interprété par Explorer 5.x) et plus spécifique qui pourra forcer la valeur de "width" pour les navigateurs conformes, compatibles CSS2, confrontés au même bug qu'IE 5.x pour Windows.

html>body .boite

{

width : 300px;

}

Ce sélecteur n'est pas interprété par Explorer 5.x pour Windows

L'explication par Çelik Tantek : http://www.tantek.com/CSS/Examples/boxmodelhack.html

 

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007