TfeServer

Blog de tfe, Perl, Web et Libre...?

CSS et Internet Explorer6

Publié le 07/10/2007 dans Web

Faisant une page internet grand public au boulot, j'ai e©te© oblige© de me pencher plus ou moins se©rieusement sur la question des respects des standards et du bon affichage sur l'ensemble des navigateurs.

Le principal proble¨me rencontre© est qu'il existe encore une bonne part de marche© utilisant Internet Explorer 6, qui supporte ou implante tre¨s mal certains attributs CSS2 voir CSS1.

Proble¨me 1: la taille d'une "div". Lorsque l'on souhaite spe©cifie© la taille d'une "div", on se voit oblige© e  ne pas utilise© 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 re©el de 30+1+5px. Cela cause de nombreux proble¨mes d'affichage et des de©calages fre©quents lors de la mise en forme.

Solution 1: utilise© deux "div" imbrique©s: En effet, si l'on souhaite utilise© une bordure, ou un padding quelconque, il faut alors imbrique© une div sur laquelle on spe©cifiera ces derniers e©le©ments.

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

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

Solution 2: Utiliser des balises vides pour simuler la pre©sence d'une bordure arrondie. Je ne fais pas traiter des la technique ici vu que d'autres personnes le font de©je  tre¨s bien.

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