Petit problème de CSS - 1er lien du menu en retrait (IE 6/7)

Bonjour,

Je suis nouveau sur ce forum et j'ai un petit problème à vous soumettre.
J'ai réalisé un site avec des menus basés sur un CSS trouvé sur le web, mais en IE 6 et 7, j'ai un petit problème dans le menu de droite. le premier lien de chaque section se met en retrait (un peu comme dans Word où la première phrase d'un paragraphe se trouve un peu en retrait par rapport au reste du texte.
Le css utilisé pour le menu de gauche part de la même base mais là le problème n'existe pas.
Quelqu'un pourrait me dire comment résoudre ce problème ?
Lien : www.louisemedicalcenter.org/test-v7
Cliquez sur le lien "français"

merci d'avance.
Modifié par patalnic (02 Feb 2008 - 10:22)

Bonjour et bienvenue ici

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Petit problèmes css".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre

Bonjour,

C'est vrai qu'il faudrait donner un peu plus de précision, comme ton code par exemple.

J'ai regardé rapidement. Essaye ça (à remplacer dans ton css) :

#sidebar2 li {
	text-align: left;
	line-height: 120%;
	font-weight: normal;
	margin-left: 12px;
	margin-bottom: 3px;
}

J'ai juste changer le padding en margin, ce qui permet parfois d'éviter les erreurs avec IE.
Je ne sais pas si ça marchera.

Bonne chance

Merci pour ta réponse Mademoille , mais cela n'arrange pas le pb. (c'est même pire puisque tous les liens se "collent" contre le bord du menu sans padding.
Voici, en premier le code du menu de droite où ça décale:

[body {
padding: 0;
background: white;
font: 76% Arial, Helvetica, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebar2 dt {
cursor: pointer;
height: 30px;
line-height: 25px;
text-align: left;
font-weight: bold;
background-image: url(../menu-pic/back-level_menu2.png);
color: #663399;
margin-bottom: 5px;
min-height: 25px;
padding-left: 12px;
}
#sidebar2 dd {
}
#sidebar2 li {
text-align: left;
line-height: 120%;
font-weight: normal;
padding-left: 12px;
margin-bottom: 3px;
}
#sidebar2 li a, #sidebar2 dt a {
color: #663366;
text-decoration: none;
display: inherit;
border: 0 none;
height: inherit;
font-weight: bold;
}
#sidebar2 li a:hover, #sidebar2 dt a:hover {
color: #993366;
font-weight: bold;
text-decoration: underline;
line-height: 120%;
}]

et le code du menu gauche qui n'a pas ce problème:

[body {
margin: 2;
padding: 0;
background: white;
font: 85% Arial, Helvetica, sans-serif;
font-weight: normal;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebar1 dt {
cursor: pointer;
height: inherit;
line-height: 25px;
text-align: right;
font-weight: bold;
background-image: url(../menu-pic/back-level_menu1b.png);
color: #663399;
margin-bottom: 5px;
min-height: 25px;
padding-right: 12px;
}
#sidebar1 dd {
}
#sidebar1 li {
text-align: right;
line-height: 120%;
font-weight: normal;
padding-right: 12px;
margin-bottom: 5px;
}
#sidebar1 li a, #sidebar1 dt a {
color: #663366;
text-decoration: none;
display: inline;
border: 0 none;
height: 30px;
font-weight: bold;
}
#sidebar1 li a:hover, #sidebar1 dt a:hover {
color: #990000;
font-weight: bold;
text-decoration: underline;
height: 30px;
margin-bottom: 5px;
line-height: 120%;]
Modifié par patalnic (02 Feb 2008 - 14:51)

bonjour

pour ton menu de droite tu as chaque fois une <div align="left"> qui englobe <ul>

outre que je n'en saisis pas bien l'utilité, est-ce que ce n'est pas ça qui perturbe ?

Bonjour Verdan,

Merci pour ta réponse mais cela ne solutionne pas mon problème.
C'est juste que j'avais un peu "pourri" mon code en essayant de corriger ce défaut !!
je viens de le nettoyer de ces <div> inutiles.
Pour essayer de trouver une solution, je précise que je travaille sur mac et que je n'ai pas ce problème ni avec Safari, ni avec Opéra, ni avec Firefox.
Et pas de Pb avec Firefox PC non plus ! Donc juste IE mais IE.... c'est presque tout

une différence que j'ai trouvée mais je ne sais pas si ça va solutionner c'est que pour :

#sidebar2 li a, #sidebar2 dt a {
color: #663366;
text-decoration: none;
display: inherit;
border: 0 none;
height: inherit;
font-weight: bold;
}

tu as cette propriété inherit alors que pour l'élément correspondant dans le menu de gauche tu as display:inline et height:30px;

peut-être qu'IE ne comprend pas inherit ?

d'autre part, rien à voir mais pour border c'est soit 0 soit none, pas les deux.

C'est corrigé aussi, mais le problème reste toujours !
une autre solution ?