Posez votre question Signaler

Listes à puces css

sam - Dernière réponse le 21 mai 2010 à 21:33
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 ;)
Lire la suite 

Listes à puces css »

3 réponses
Réponse
+0
moins plus
J'oubliez, pour vérifier par vous meme

http://www.sigid.fr/Temp/
Ajouter un commentaire
Réponse
+0
moins plus
Personne ?
Ajouter un commentaire
Réponse
+0
moins plus
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
Ajouter un commentaire
Ce document intitulé « Listes à puces css » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?