Listes à puces css Fermé

Question

Bonjour,

Voila je reviens vous voir parce que j'ai un problème assez conséquent, mon ébauche de site est valide xhtml/css et s'affiche parfaitement sous firefox, sauf que sous ie, chrome, opera et safari c'est la catastrophe au niveau du menu horizontal.

J'ai fais ce dernier avec une liste à puce orientée horizontalement. Cette dernière sous les naviguateurs cités plus haut superpose les différents mots qui compose mais <li>

Pour illustrer, sous firefox:

lien1        lien2        lien3

Sous les autres naviguateurs:

lien          lien          lien
1               2              3

J'aimerais comprendre pourquoi et résoudre ce soucis (meme sil faut passer par deux feuilles de style ;)

sam · Answer

J'oubliez, pour vérifier par vous meme

http://www.sigid.fr/Temp/

sam · Answer

Personne ?

SchSoftware · Answer

Bonsoir
Donc, j'ai bien constater le problème sous FF et pas IE

Je ne suis pas spécialiste de la manière dont ils interprètent le CSS mais je pense que votre soucis vient du "padding" des "a_menu", trop grand... (25% pour left et right)
En effet, si je ne dit pas de bêtise (à vérifier) vous lui demandez une marge de 25% de la largeur de votre fenêtre (et non pas de l'élément qui les contient, les quelques manipulations que j'ai effectuer sur ton CSS semble le confirmer...)

Pour vous faire une idée, rajoutez dans votre CSS pour ".ul_menu .li_menu .a_menu" et ".li_menu:hover .a_menu:hover" la ligne suivante (qui permet de définir un comportement de retour à la ligne pour les texte contenants un espace!)
white-space: nowrap;
Vous pourrez constater sous IE qu'il n'y a plus de retour à la ligne mais, que la fin de texte est masquer par la cellule suivante...

Je dirais que la différence vient du fait que FF arrive à détecter cette trop grand marge et la corrige comme un chef...
Mais un stricte respect de la norme CSS devrais lui faire prendre le même comportement que FF et consort...
Les puristes crieront "bouuuuuu" et les autres "bravo FF"

Après test, je dirais qu'un "padding" de 10 pixel
padding:0 10px 0 10px;
Donne de bon résultat visuel... (mais bon, à vous de voir...)

Bien à vous

Listes à puces css

3 réponses

Discussions similaires