Discussion :

[mikl86]

Bonjour à tous,

J'utilise un menu css assez basique sur mon site internet qui fonctionne bien sur une grande partie des navigateurs. (script expliqué par normandlamoureux)
Mais voila, sous Safari (derniere version?), sous ff3 et surtout ie8, les liens ne sont pas cliquables. le rollover ne fonctionne pas, bref le menu n'est pas fonctionnel.
Avez vous connaissance de problemes similaires ? que puis je faire pour débugger ?
Je suis dessus depuis ce matin, impossible de trouver la solution.
Merci d'avance.
Je met le code html et css ci dessous pour aperçu:

html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="en-tete"> 
<ul> 
  <li><a href="index.html"><span>Accueil</span></a></li> 
  <li><a href="devis.html"><span>Demande en ligne</span></a></li> 
  <li><a href="informations.html"><span>Informations</span></a></li> 
  <li><a href="contact.html"><span>Contact</span></a></li> 
 </ul> 
</div>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#en-tete ul {margin:16px 16px 0 0; padding:0; list-style:none} 
#en-tete li {float:left; margin-left: 3px} 
#en-tete a, #actif {float:left; text-decoration:none; letter-spacing:1px; padding- 
left:10px; background:url(coin-gauche.png) 0% -250px no-repeat} 
#en-tete span, #actif span {float:left; padding:6px 10px 3px 0; background:url(coin- 
droit.png) 100% -250px no-repeat; color:#fff; font-weight:bold;} 
#actif {background-position:0 0} 
#actif span {background-position:100% 0; color:#333} 
#en-tete a:hover, #en-tete a:focus {background-position:0 -500px} 
#en-tete a:hover span, #en-tete a:focus span {background-position:100% -500px}

[sebhm]

Bonjour,

cette portion de code fonctionne chez moi (FF3.0)
meme si mettre un <span> dans un <a>, c'est pas top !

[Bisûnûrs]

Tu dois avoir un autre style qui entre en conflit, comme par exemple un contenu décalé avec un margin et un position:relative et qui du coup passe par dessus ton menu de manière invisible. Conséquence, tes liens ne sont plus accessibles par la souris (mais encore par la navigation clavier).

meme si mettre un <span> dans un <a>, c'est pas top !

Ah bon ? Le span reste une balise générique inline, donc on peut toujours mettre un span dans un lien pour des besoins purement graphiques.

[Macmillenium]

Ah bon ? Le span reste une balise générique inline, donc on peut toujours mettre un span dans un lien pour des besoins purement graphiques.

+1, SPAN est un élément neutre.

[sebhm]

Ah bon ?

+1

mais heu .... !!

j'ai dit une connerie, excusez moi, mais ne vous inquiétez pas, ce n'est pas la première fois ... ni la dernière...