samedi 4 octobre 2008

[(x)html valide] Afficher une liste plus à gauche avec IE

En (X)HTML l'élément ul accuse une marge gauche de manière naturelle. Quelques fois nous avons envie de réduire cette marge, et le réflexe serait d'ajouter une marge négative à ul ou à li... Mais si Firefox comprend très bien les marges négatives et les affiche correctement, IE ne les comprend pas bien et le résultat sera une liste avec des mots tronqués.

La solution pour obtenir un résultat valable sous IE aussi est de ne pas appliquer la marge négative à l'élément ul lui-même (ou à li), mais de l'entourer d'une div à laquelle nous appliquons la marge négative.

Nous avons donc notre liste dans notre page (x)html :
<ul>
<li>blablabla </li>
<li>bliblibli </li>
</ul>


Nous l'entourons d'une div :
<div class="reculer"> <ul>
<li>blablabla </li>
<li>bliblibli </li>
</ul> </div>


et dans note feuille de style nous indiquons les marges de la classe correspondante :
.reculer { margin:0 0 0 -15px;}

0 commentaires: