Problème de listes décalées vers la droite

[Kimberlyclarko]

Bonsoir,

j'ai un soucis sur le menu du site : www.checkflow.com

Ca s'affiche très bien sous IE (97% des visiteurs) mais sur Mozilla le menu est complètement décallé à droite, et c'est encore pire lorsqu'une des entrées est déroulée.

Ca fait quelques jours que je me prend la tête dessus, j'ai fais des millions de tests (ok, j'exagère un peu ) mais impossible de corriger le problème.

C'est à se demander s'il y a une solution...

Une ame charitable pourrait-elle me conseiller ?

Voici le code du coupable :

#menu {
list-style-type: none;
margin-left: 10px;
margin-right: 12px;
margin-bottom: 5px;
margin-top: 10px;
}
#menu li {
padding-bottom: 2px;
padding-top: 2px;
BORDER-BOTTOM: #ABB6BA 1px dotted;
}
#menu a {
DISPLAY: block; 
margin: 0 2px;
color: #000;
text-decoration: none;
PADDING-LEFT: 0px; 
}
#menu a:hover {
BACKGROUND-COLOR: #ABB6BA;
color: #FFF;
background-image:url(images/puce_menu.gif);
background-repeat:no-repeat;
background-position:0% 40%;
padding-left:10px;
}
#menu ul {
color: #FFF;
margin: 0 0px;
}
#menu ul li {
padding-bottom: 0px;
padding-top: 2px;
BORDER-BOTTOM: #FFFFFF 1px solid;
}
#menu ul a {
color: #FFF;
BACKGROUND-COLOR: #C4CDD2;
}
#menu ul a:hover {
BACKGROUND-COLOR: #ABB6BA;
padding-left:0px;
background-image:url(images/pix.gif);
}
.menuon {
display: block;
background-image: url(images/puce_menu.gif);
background-repeat: no-repeat;
background-position: 0% 40%;
padding-left: 10px;
color: #FFF;
BACKGROUND-COLOR: #ABB6BA;
}

Merci d'avance pour votre aide

[LaurentDenis]

Ca s'affiche très bien sous IE (97% des visiteurs) mais sur Mozilla le menu est complètement décallé à droite, et c'est encore pire lorsqu'une des entrées est déroulée.

Lire et relire Consistent List Indentation sur ce problème qui revient souvent :

Pour créer l'espace nécessaire aux puces d'une liste <ul>, les navigateurs n'ont pas tous adoptés la même méthode :

- les navigateurs basés sur Gecko (FireFox, Mozilla) appliquent par défaut un padding-left de 40px à <ul>, et placent la puce dans ce padding.

- IE et Opera appliquent une margin-left de 40px à <ul>, et y placent la puce :

Quand on modifie uniquement soit la marge, soit le padding d'un <ul>, on se retrouve donc avec un résultat différent selon les navigateurs.

Il faut donc toujours spécifier à la fois les valeurs de margin et de padding pour les éléments <ul>, en mettant l'un à zéro.

[Kimberlyclarko]

Mer pour la réponse, je vais refaire quelques tests

[thick]

Je suis moi-même en train d'affronter les mêmes dilemnes, mais je ne suis toujours pas sûr de savoir quand il faut modifier padding et/ou margin.

C'est clair qu'à part tester sous les différentes navigateurs reste le seul moyen, mais on navigue quand même un peu à vue.

J'essaye surtout de rester le plus simple possible, pour ne pas multiplier les chances de mauvais affichage.

[Kimberlyclarko]

Si je comprends bien, il vaut mieux toujours déclarer les margin ET le padding par défaut afin d'être "compliant" ?

En tous cas, merci, ca fonctionne nickel maintenant

[Perrine]

(Désolée de bumper ce post qui date un peu )

Autre solution, utiliser le sélecteur universel qui permet de tout mettre à plat dès le début :

*{
padding:0;
margin:0;
border:0;
}

[Florent V.]

Si je comprends bien, il vaut mieux toujours déclarer les margin ET le padding par défaut afin d'être "compliant" ?

Oui. Une précision cependant : il ne s'agit que de margin-left et de padding-left. Les autres marges par défaut sont sensiblement identiques d'un navigateur à l'autre (1em en haut, 0 à droite, 1em en bas, pas de padding).

Deux solutions :

1. On met margin-left à zéro, et on précise le padding-left souhaité. Exemple :

ul, ol {
	margin-left: 0;
	padding-left: 30px;
}

2. On met padding-left à zéro, et on précise le margin-left souhaité. Exemple :

ul, ol {
	margin-left: 30px;
	padding-left: 0;
}

Dernière remarque en passant : il me semble que le retrait de gauche des listes ordonnées et non ordonnées n'est pas de 40px (contrairement à ce qui est dit plus haut), mais de 2.5em. Pour une taille de texte par défaut de 16px, 2.5em donnera effectivement 40px (2.5*16=40). Si on diminue un peu la taille du texte, par contre, on se retrouve avec un retrait de gauche moins important.

[Youn]

Je suis moi-même en train d'affronter les mêmes dilemnes, mais je ne suis toujours pas sûr de savoir quand il faut modifier padding et/ou margin.

C'est clair qu'à part tester sous les différentes navigateurs reste le seul moyen, mais on navigue quand même un peu à vue.

J'essaye surtout de rester le plus simple possible, pour ne pas multiplier les chances de mauvais affichage.

Bonjour,

Pour mon premier post voici une image qui résume les padding et margin pour tous ceux qui comme toi et moi se sont longtemps posé la question de savoir quand utiliser l'un ou l'autre.

Bien sûr même en sachant lequel utiliser, l'interprétation n'est pas toujours la même suivant les navigateurs...

Modifié 19 Juin 2008 par Youn