28172 sujets

CSS et mise en forme, CSS3

Bonsoir,
j'ai un souci concernant ma page perso, la liste des rubriques (portfolio et galeries) s'affiche correctement sur les 5 navigateurs que j'ai testé : FF3.5, IE8, IE6, Opera 9.64, Chrome 3.

Ca donne ça :

http://dsofficial.free.fr/public/new_theme2

Mais sur Firefox =< 3, ca donne ça :

http://img26.imageshack.us/img26/8893/14901e95fd950fd7a33208ew.png

En fait après m'être renseigné, c'est les float et les positions relatives qui posent problème.
Mais je ne sais pas comment y remédier.

J'ai une liste et les éléments de liste li{float:left;} dans chacun desquels il y a une img{position:relative;top:2em;} et un span{display:block;position:relative;bottom:1.5em;}

Si je met les éléments de liste en inline et en supprimant le float:left, ca donne toutes les <li> les unes en dessous des autres.

Qu'en pensez-vous ?
Modifié par darkstar2023 (09 Nov 2009 - 00:28)
J'ai rectifié certaines choses (en mettant une hauteur aux éléments de liste : height:110px)
mais toujours le même problème)

D'ailleurs même en supprimant toutes les positions relatives ca ne résout rien...
Finalement contrairement au titre du sujet, le problème n'a rien à voir avec les positions...

screenshot (firefox 2) http://img94.imageshack.us/img94/9613/scre.jpg

PS. Pour une fois que ce n'est pas IE6 qui me fait suer.
Modifié par darkstar2023 (08 Nov 2009 - 23:22)
Problème résolu.

Sachant que dans chaque <li> il y avait un lien <a> et il fallait mettre a{display:block; width:100%;}
Je ne sais pas pourquoi il faut mettre ça en particulier (les mystères du css), mais tant que ça marche.

Espérant que cela puisse servir à d'autres gens.