Problème d'images dans une liste avec display:block dans IE6

Bonsoir,

Je suis en train de créer un site qui tourne nickel partout sauf sous ce satané IE6. Mes liens principaux sont dans une liste avec des images en display:block mais elles s'affichent les unes au dessus des autres...

Ce sera plus facile avec le cas concret visible ici : http://www.district-b.com/ricoh/homepage/_fr/index.html

Je dois présenter ce site demain au client, une aide rapide sera la bienvenue

Merci,
Laurent

Bonsoir,
donne un width a tes <li> dans une feuille de style spécifique à ie6.

"Bonsoir,
donne un width a tes <li> dans une feuille de style spécifique à ie6." Désolé pour le message en double, j'ai glissé.
Modifié par loicbcn (04 Oct 2010 - 22:27)

Hello,

Merci pour ta réponse, malheureusement chaque image a une largeur différente...

J'ai pu partiellement résoudre le problème en rajoutant un float:left dans le li, bien que ça m'apporte un nouveau soucis de décalage au dessus et en dessous des images.

Pas grave, j'expliquerai comme d'habitude que ce navigateur a 10 ans et tant pis pour les gens qui l'utilisent encore

Merci encore et bonne fin de soirée

Bonjour,

Bulor a écrit :
Mes liens principaux sont dans une liste avec des images en display:block mais elles s'affichent les unes au dessus des autres...

euuuuh oui c'est le but de display: block; que d'afficher les éléments les uns en dessous de l'autre (en occupant 100% de la largeur par défaut).

float: left; est une des solutions mais le comportement des marges en est effectivement chamboulé. Il faut alors, au plus simple, jouer avec le padding.

Une autre solution est d'utiliser display: inline-block; qui combine le meilleur de block et d'inline, avec le seul petit défaut de prendre l'espace entre balise fermante et balise ouvrante, espace qu'il faut enlever dans le code HTML. Et IE6/7 ont besoin d'une ou deux instructions pour avoir le même comportement que inline-block; (voir les Tutos).