[Réglé] [Explication stp?] Problème avec Display:block, liens et IE6

Bonjour,

Tout d'abord, j'ai fait quelques recherches sur le web, sur le forum et lus rapidement la FAQ. J'ai trouvé des problèmes semblables, mais rien qui m'indique comment régler mon problème qui est de plus en plus urgent. Le site doit être livré très prochainement...

Je ne peux pas montrer de page en ligne ni mettre le vrai contenu de mes liens, car le site n'est pas encore public.

Mon problème étant que j'ai un menu composer de liens que je veux mettre display: block afin que l'espacement autour soit aussi cliquable. Je précise que mon menu est dynamique, au cas ou...

Tout va bien dans Firefox et IE7. Par contre, IE6 me fait des misères...

Sous IE6, tant que je reste sur le texte du lien, ça marche, mais dès que je vais à côté, plus de lien!

Mon code html :

<div id="sousmenu">
    <a href="http//..." class=menugauche>texte du lien1</a>
    <a href="http//..." class=menugauche>texte du lien2</a>
</div>

Mon code CSS :

div#sousmenu
{
   margin: 0px auto 0px auto;
   padding: 0px 0px 0px 0px;
   vertical-align: bottom;
   width: 137px;
}

div#sousmenu a.menugauche:link 
{
   display: block; 
   border-top: solid 4px #E0E0E0; 
   text-align: right; 
   margin: 0px 0px 0px 0px; 
   padding: 3px 8px 3px 5px; 
   font: 9px Verdana, Tahoma, arial, sans-serif;
   background-color: #999;  
   color: #FFF; 
   text-decoration: none;
}

div#sousmenu a.menugauche:visited 
{
   display: block; 
   border-top: solid 4px #E0E0E0; 
   text-align: right; 
   margin: 0px 0px 0px 0px; 
   padding: 3px 8px 3px 5px; 
   font: 9px Verdana, Tahoma, arial, sans-serif; 
   background-color: #999; 
   color: #FFF; 
   text-decoration: none;
} 

div#sousmenu a.menugauche:focus 
{
   display: block; 
   border-top: solid 4px #E0E0E0; 
   text-align: right; 
   margin: 0px 0px 0px 0px; 
   padding: 3px 8px 3px 5px; 
   font: 9px Verdana, Tahoma, arial, sans-serif;
   background-color: #999; 
   color: #FFF; 
   text-decoration: none;
}

div#sousmenu a.menugauche:hover 
{
   display: block; 
   border-top: solid 4px #E0E0E0; 
   text-align: right; 
   margin: 0px 0px 0px 0px; 
   padding: 3px 8px 3px 5px; 
   font: 9px Verdana, Tahoma, arial, sans-serif; 
   background-color: #666; 
   color: #FFF; 
   text-decoration: none;
} 

div#sousmenu a.menugauche:active 
{
   display: block; 
   border-top: solid 4px #E0E0E0; 
   text-align: right; 
   margin: 0px 0px 0px 0px; 
   padding: 3px 8px 3px 5px; 
   font: 9px Verdana, Tahoma, arial, sans-serif; 
   background-color: #999;  
   color: #FFF; 
   text-decoration: none;
}

La seule façon pour que ça fonctionne c'est en ajoutant une image en haut de mes liens, n'importe quelle image! Mais en faisant ça, je brise le layout... En plus, j'ai remarqué ça par hasard et par désespoir!

<div id="sousmenu">
    <img src="monimage.gif" alt="" />
    <a href="http//..." class=menugauche>texte du lien1</a>
    <a href="http//..." class=menugauche>texte du lien2</a>
</div>

1- Est-ce que quelqu'un peut me dire pourquoi ça ne marche pas sans l'image?
2- Pourquoi ça marche avec l'image? (ça me rend presque folle de ne pas comprendre...)

Merci d'avance!
Modifié par Ziel (12 Jun 2007 - 19:16)

Bonjour,

Une liste pour le menu c'est mieux !!!
as tu essayé :

div#sousmenu a:hover 
{
   background: none;

}

Bonjour Ghost,

Je sais qu'une liste c'est mieux pour un menu. Mais ce site est une refonte d'une refonte faite par plusieurs autres personnes avant moi. Le temps alloué est trop court, les risques de régression trop élever et le client change trop souvant d'idée pour s'aventuré à un tel changement (le menu est dynamique et bien plus complex que ce que j'en est montrer).

Par contre, je ne vois pas en quoi mettre un "background: none" dans le hover de mon lien aiderait à régler le problème, pourrais-tu m’expliquer stp? J'ai tout de même essayé et ça ne marche pas.

J'ai essayé autre chose qui a fonctionné. J'ai enlevé le width.
Sauf que ça me cause un autre problème!

div#sousmenu
{
   margin: 0px auto 0px auto;
   padding: 0px 0px 0px 0px;
   vertical-align: bottom;
   /* width: 137px; */
}

En enlevant le width, mes éléments de menus deviennent trop larges.

1- Quelqu'un à une idée du pourquoi le fait d'enlever le width fait en sorte que mon lien fonctionne hors texte?
2- Une idée du pourquoi ça marche si je mets une image en haut?
3- Une autre solution?

[EDIT]
Finalement, j'ai réussi à enlever le width et à ajouter ma largeur d'éléments.
En mettant 6px de chaque côté.

div#sousmenu
{
   margin: 0px 6px 0px 6px;
   /*margin: 0px auto 0px auto;*/
   padding: 0px 0px 0px 0px;
   vertical-align: bottom;
}

Parcontre, j'ai toujours besoin d'explication sur le pourquoi du comment!
Puis-je laisser le topique non réglé le temps avoir l'explication?

[/EDIT]
Modifié par Ziel (12 Jun 2007 - 17:27)

Re,

Excuse, j'avais lu ton post en diagonale
C'est un question de hasLayout tu peux régler cela en donnant un height: 1% à tes liens...

Désolé

explications
Modifié par ghost (12 Jun 2007 - 17:56)

Je vais lire ça, mais je ne sais pas si ça va m'aider à comprendre le cas particulier que j'ai mentionné, car j'ai corrigé le problème sans mettre de height: 1%

Merci quand même!