Sorecson

Une petite liste de hack pour faciliter la mise en place de nos feuilles de style

IE 6 et inférieurs

Utiliser * html {}

IE 7 et inférieurs

Utiliser *+html, * html {}

IE 7 seulement

Utiliser *+html {}

IE 7 et navigateurs modernes seulement

Utiliser html>body {}

Navigateurs modernes seulement (IE 7 non inclus)

Utiliser html>/**/body {}

Beaucoup d’internautes n’utilisent pas les “absolute” dans leur CSS à cause des nombreux bugs liés à IE6.

Voici un moyen d’y remédier, grâce à un petit hack :

Il suffit d’ajouter : “clear: both;” ou “clear: left;” ou “clear: right;” et tout devrait s’afficher correctement

La meilleure solution disponible pour créer des bords arrondis dans un Div en CSS / XHTML est la méthode des positions relatives, qui est bonne sémantiquement et dispose de beaucoup de possibilités graphiques tout en restant compatible avec la plupart des navigateurs.

Code XHTML :

<div class="relsample">
 <div class="top_left"></div>
 <div class="top_right"></div>
 <div class="content">Ceci est un exemple</div>
 <div class="bottom_left"></div>
 <div class="bottom_right"></div>
</div>

Code CSS :

.relsample { width: 250px; position: relative; background-color: #FF0000; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; background-color: #00FF00; }
.relsample .top_left { top: 0px; left: 0px; background-image: url("corner_top_left.gif"); z-index: 0; }
.relsample .top_right { top: 0px; right: 0px; background-image: url("corner_top_right.gif"); z-index: 1; }
.relsample .bottom_left { bottom: 0px; left: 0px; background-image: url("corner_bottom_left.gif"); z-index: 2; }
.relsample .bottom_right { bottom: 0px; right: 0px; background-image: url("corner_bottom_right.gif"); z-index: 3; }
.relsample .content { position: relative; padding: 12px; z-index: 4; }

Ce code est compatible avec IE6. Les possibilités graphiques sont très intéressantes.