Kimberlyclarko Posté 18 Septembre 2004 Partager Posté 18 Septembre 2004 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
LaurentDenis Posté 19 Septembre 2004 Partager Posté 19 Septembre 2004 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Kimberlyclarko Posté 19 Septembre 2004 Auteur Partager Posté 19 Septembre 2004 Mer pour la réponse, je vais refaire quelques tests Lien vers le commentaire Partager sur d’autres sites More sharing options...
thick Posté 19 Septembre 2004 Partager Posté 19 Septembre 2004 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Kimberlyclarko Posté 20 Septembre 2004 Auteur Partager Posté 20 Septembre 2004 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Perrine Posté 25 Mai 2006 Partager Posté 25 Mai 2006 (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;} Lien vers le commentaire Partager sur d’autres sites More sharing options...
Florent V. Posté 31 Janvier 2007 Partager Posté 31 Janvier 2007 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. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Youn Posté 19 Juin 2008 Partager Posté 19 Juin 2008 (modifié) 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 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant