espacement des <li>

bug de CSS avec IE?

Sujet résolu

2 avril 2006 à 19:10:23

Bonsoir!

Voila j'ai un leger soucis avec Internet Explorer (ça vous etones?)

Le probleme est que mon menu, composé de <ul> et de <li> est different sur Internet Explorer malgres tous mes efforts de compatibilité.

Je m'explique: le probleme vient en fait de l'espacement entre chaque <li>

Sur Firefox: rien a redire, l'espacement est defini par le line-height:

Mais sur IE: j'ai beau essayer plusieurs propriéts CSS: IE garde un espacement entre les <li> qui decalle completement le menu.

Y a-t-il une autre propriété pour definir l'espacement des <li>??

Voici le site en question

et ici les portions de code, qui selon moi sont concernées:

le code dans sont integralité est ici (clik droit "afficher la source")

*{margin:0px; border:0px; padding: 0px;} /* pour mettre toutes les marges, bordures et padding a 0, utile pour les differences entres navigateurs

*/

#menu
{
width:157px;
height:421px;
background-image:url("../images/back_menu_all.jpg");
background-repeat: no-repeat;
float:left;
margin-top:5px;
}

#menu ul
{
list-style-image:url("../images/dot.gif");
padding-left: 20px;
line-height:13px;
}

#menu li
{
line-height:1.0em;
font-size:1.0em;
}

#sousmenu1
{
background-image:url("../images/menu1/back_menu1.jpg");
background-repeat: no-repeat;
width:115px;
height:83px;
margin-left: 21px;
margin-top: 15px;
padding-top: 30px;
}

le code dans son integralité est disponible ici

Et enfin un petit screen du probleme:
Image utilisateur

(la petite fleche verte = le decalage des <li>
et la grande fleche verte = le decalage final, sur tout le menu, dû a la somme de tous les decalages nons voulus)

Voila, si quelqu'un a une idée, merci beaucoup!

PS: non, le design n'est pas de moi, je me charge de le decouper pour une amie.

..:: Alpha_Chrisis ::..

strucky

2 avril 2006 à 20:38:58

Salut,

Mets un height sur tes li en px.

A moins que j'ai mal vu, mais pourquoi un font-size et un line-height, alors qu'il n'y a pas de texte dans tes liens ?

pascall

2 avril 2006 à 22:03:32

effectivement, j'ai vu moi aussi . faut essayer avec ce line-height en px. Contrairement à ce qui est dit, moi je vois aussi un décalage dans le menu avec FF

Alpha_Chrisis

3 avril 2006 à 9:59:35

Houra les amis!

J'ai réussi a résoudre mon probleme finalement!

Apres avoir tenté des centaines (heu... bon okay dizaines) de solutions, je suis enfin arrivé a trouvé le probleme. Je vous explique comment j'ai fait quand meme, ça poura aider les autres:

Tout d'abord, dans le XHTML;
les puces n'etaient pas alignées avec les images de texte

-> EXIT les "align:center;" (au passage, c'est meme pas valide, normalement c'est "middle" mais c'est bluefish qui me proposait "center", allez savoir pourquoi)
Finalement quand on ne met rien ça marche encore mieux,

.

Ensuite le plus important, le CSS;
Le code plutot qu'un long discours

#menu ul
{
/* j'ai enlevé le "line-height" qui n'avait rien a faire là */
list-style-image:url("../images/dot.gif");
padding-left: 25px;
margin:0px;/* le margin n'a théoriquement pas besoin d'etre précisé vu qu'il est par defaut a 0px grace a ma premiere balise dans le CSS (voir mon post plus haut) mais c'est par sureté que je le repete.*/
}

#menu li
{
/*j'ai enlevé le "line-height" là aussi car apparement FF et IE l'interpretent chacun sa façon.*/
font-size:12px;/*et j'ai mis un "font-size" bien qu'il n'y ai pas de texte, car les images sont en fait considérées comme le texte (merci AlsaCréation pour cette precieuse info)*/
/*12px parceque comme ça ça le fait bien, c'est tout. :-P*/
}

le résultat ici. avec le CSS là [liens temporaires]

Voila, du coup je pense avoir répondu a ta question Strucky.
(un article qui devrait t'aider: sur AlsaCréation)

Et pour Pascall: figures toi que je ne m'en etait pas redu compte car il s'avere que il y a aussi des differences entre le Firefox version Linux (que j'utilise) et le firefox version windows! Il faut dire aussi que sur linux je n'ai pas la derniere version de firefox ça peut venir de là.
En tout cas maintenant c'est pareil partout

Merci de m'avoir fait remarquer ce detail crucial.

J'espere que ça eclairera ceux qui pouront avoir le meme probleme, et merci encore a ceux qui m'ont repondu.

PS:le site est temporairement hebergé sur un de mes sites, il n'y restera pas longtemps, mais je m'engage a heberger le tout sur un autre hebergeur et à modifier les liens plus tard pour qu'ils soient toujours valides.