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

Version complète: sur le forum Webmaster Hub : Problème de listes décalées vers la droite

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Kimberlyclarko

samedi 18 septembre 2004 à 23:34

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 :

CODE

#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

dimanche 19 septembre 2004 à 04:03

CITATION(kimberlyclarko @ dimanche 19 septembre 2004, 00:34)

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

dimanche 19 septembre 2004 à 08:48

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

thick

dimanche 19 septembre 2004 à 20:40

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

lundi 20 septembre 2004 à 11:09

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

jeudi 25 mai 2006 à 16:46

(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 :

CODE

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

Florent V.

mercredi 31 janvier 2007 à 22:38

CITATION(Kimberlyclarko @ lundi 20 septembre 2004, 11h09)

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 :

CODE

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

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

CODE

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

jeudi 19 juin 2008 à 16:41

CITATION(thick @ dimanche 19 septembre 2004 à 20:40)

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...

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.