Tfe

Faisant une page internet grand public au boulot, j'ai été obligé de me pencher plus ou moins sérieusement sur la question des respects des standards et du bon affichage sur l'ensemble des navigateurs.

Le principal problème rencontré est qu'il existe encore une bonne part de marché utilisant Internet Explorer 6, qui supporte ou implante très mal certains attributs CSS2 voir CSS1.

Problème 1: la taille d'une "div". Lorsque l'on souhaite spécifier la taille d'une "div", on se voit obligé e  ne pas utilisé les attributs "padding", "border". En effet IE6 calcule la taille de la div selon la zone de texte visible, et non avec la zone totale. Exemple, une div ayant un height:30px; border:1px solid black; padding:5px; se retrouve alors avec un height réel de 30+1+5px. Cela cause de nombreux problèmes d'affichage et des décalages fréquents lors de la mise en forme.

Solution 1: utiliser deux "div" imbriqués: En effet, si l'on souhaite utiliser une bordure, ou un padding quelconque, il faut alors imbriquer une div sur laquelle on spécifiera ces derniers éléments.

Problème 2: Les bordures arrondies! Le début de CSS3 implenté par Mozilla Firefox nous propose un joli -moz-border-radius, correspondant au border-radius css3. Cependant sous IE* cet attribut n'est évident pas pris en charge.

Solution 1: Utiliser des images pour afficher l'arrondi. L'idée est bonne mais cependant implique l'imbrication de beaucoup d'éléments et le problème du changement de couleur de fond de la bordure imposant l'edition des images.

Solution 2: Utiliser des balises vides pour simuler la présence d'une bordure arrondie. Je ne fais pas traiter des la technique ici vu que d'autres personnes le font déjà  très bien.

En ésperant que ces quelques astuces seront utils e  quelqu'un :)