[Résolu] IE8 - Problème avec mon menu...

Bonjour à tous,

Cela faisait un petit moment que je n'étais pas venu sur le forum car le site que je développe actuellement me prend du temps et j'ai mes études à cotés donc bon... Et il faut dire que j'ai tellement appris grâce au site Alsa que j'arrive à tout faire seul désormais mais (oui y'a toujours un mais ^^)

J'ai un problème sous Internet explorer (pour changer...) et plus précisement sur la version 8 (IE7, FF3.X, Opera et Chrome affiche correctement mon menu) qui me double mes images de mon menu... ce qui provoque un débordement. Voici une image pour vous illustré la cata :


[Edit : ton image provoquait une déformation du forum, je lui ai dont attribué une miniature]

J'ai essayé plusieurs manipulations mais en vain... je ne comprends pas d'où provient cette erreur donc je fais appel aux pro

Ci dessous mon code HTML :

<div id="menu_lambda">
<ul>
      <li><a id="menu_fixe_g"></a></li>
      
	  <li> <a href="espace_particuliers.html" id="menu_lambda_1"</a></li>
      
	  <li><a id="menu_lambda_2"></a></li>
      
	  <li><a href="espace_entreprises.html" id="menu_lambda_3"</a> </li>
      
	  <li><a id="menu_lambda_4"></a></li>
      
	  <li><a href="espace_confidentiel.html" id="menu_lambda_5"</a> </li>
      
	  <li><a id="menu_fixe_d"></a></li>
  </ul>
</div>

Et là mon code CSS :

#menu_lambda  {
   width: 808px;
   height: 25px;
   list-style: none ;
   margin: 0 ;
   padding: 0 ;
}

#menu_lambda ul  {
	float:left;
	width: 808px ;
    list-style-type:none;
    padding:0px;
    margin:0px;
}

#menu_lambda ul li {
	float:left;
    display:block;
	margin:0px;
    padding:0px;
}

#menu_lambda  a {

	display:block;
    float:left;
    margin:0px ;
}

#menu_lambda #menu_fixe_g {
     width:203px;
     height: 25px;
     background-image: url("images/menu_fixe_g.png");
	 background-repeat: no-repeat;
	 }
	 
#menu_lambda #menu_lambda_1 {
     width:99px;
     height: 25px;
     background-image: url("images/menu_lambda_1.png");
	 background-repeat: no-repeat;
	 }
	 
#menu_lambda #menu_lambda_2 {
     width:50px;
     height: 25px;
     background-image: url("images/menu_entre.png");
	 background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_3 {
     width:100px;
     height: 25px;
     background-image: url("images/menu_lambda_3.png");
	 background-repeat: no-repeat;
	 }
	 
#menu_lambda #menu_lambda_4 {
     width:50px;
     height: 25px;
     background-image: url("images/menu_entre.png");
	 background-repeat: no-repeat;
	 }
	 
#menu_lambda #menu_lambda_5 {
     width:103px;
     height: 25px;
     background-image: url("images/menu_lambda_5.png");
	 background-repeat: no-repeat;
	 }
	 
#menu_lambda #menu_fixe_d {
     width:202px;
     height: 25px;
     background-image: url("images/menu_fixe_d.png");
	 background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_1:hover {
    width:99px;
	height:25px;
    background-image:url("images/menu_over_1.png");
	background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_3:hover {
    width:100px;
	height:25px;
    background-image:url("images/menu_over_2.png");
	background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_5:hover {
    width:103px;
	height:25px;
    background-image:url("images/menu_over_3.png");
	background-repeat: no-repeat;
	 }
	 

Merci de votre aide
Modifié par Cocopop (11 Sep 2009 - 16:16)

Bonjour,

Mon dieu, des liens vides... Et des images porteuse de contenu dans le CSS...

Pour résoudre ton problème, le plus simple c'est de mettre les images dans le code HTML avec un alt qui va bien.

Merci Laurie-Anne, tu avais vu juste. J'ai remis les images dans le HTML avec un alt et tout fonctionne normalement. En revanche je n'ai plus l'effet de hover et je ne veux pas passer par du JS, je dois m'y prendre comment ?

Voici comment j'ai procédé pour ceux qui sont ou seront face à mon problème :

<div id="menu_lambda">
<ul>
      <li><img src="images/menu_fixe_g.png" alt="" name="menu_fixe_g" width="203" height="25"  border="0" id="menu_fixe_g" /></li>
      
	  <li><a href="espace_particuliers.html" id="menu_lambda_3" > <img src="images/menu_lambda_1.png" alt="Espace Particuliers" name="menu_lambda_1" width="99" height="25"  border="0" /></a></li>
      
	  <li><img src="images/menu_entre.png" alt="" name="menu_lambda_2" width="50" height="25"  border="0" id="menu_lambda_2" /> </li>
      
	  <li><a href="espace_entreprises.html" id="menu_lambda_3" > <img src="images/menu_lambda_3.png" alt="Espace Entreprises" name="menu_lambda_3" width="100" height="25"  border="0"/></a></li>
      
	  <li> <img src="images/menu_entre.png" alt="" name="menu_lambda_4" width="50" height="25"  border="0" id="menu_lambda_4" /> </li>
      
	  <li><a href="espace_confidentiel.html" id="menu_lambda_5" > <img src="images/menu_lambda_5.png" alt="Espace Confidentiel" name="menu_lambda_5" width="103" height="25"  border="0"/></a></li>
      
	  <li><img src="images/menu_fixe_d.png" alt="" name="menu_fixe_d" width="202" height="25"  border="0" id="menu_fixe_d" /> </li>
  </ul>
</div>

Encore merci
Modifié par Cocopop (11 Sep 2009 - 10:28)

Pour les effets de hover, il est préférable de passer par du JS.

C'est la solution la plus propre et accessible, selon moi.

Merci de ta rapidité à répondre et en attendant j'ai regardé comment le faire en JS, pour ceux qui sont dans mon problème regardez ici

Mais il est impossible de le faire en css aussi ? J'aimerais combiné les deux car si le JS est pas activé, l'effet hover disparaitra

Voici ce que j'ai fait pour le hover via le CSS :

#menu_lambda #menu_lambda_1:hover {
    width:99px;
	height:25px;
    background-image:url("images/menu_over_1.png");
	background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_3:hover {
    width:100px;
	height:25px;
    background-image:url("images/menu_over_2.png");
	background-repeat: no-repeat;
	 }

#menu_lambda #menu_lambda_5  {
    width:103px;
	height:25px;
    background-image:url("images/menu_over_3.png");
	background-repeat: no-repeat;
	 }

Dans le cas d'un menu en image, non ce n'est pas possible de le faire en CSS (à moins de mettre les images dans le CSS, mais comme elles sont porteuses de contenu c'est une très mauvaise idée). De plus la pseudo classe :hover n'est fonctionnelle sous IE6 que lorsqu'elle est appliquée à l'élément A. Ce qui n'est pas le cas ici.

Il y a plus d'utilisateurs d'IE6 que d'utilisateurs qui désactivent JS (selon les stats qu'on peut trouver sur le net). Et il est préférable d'avoir un menu accessible (même si les images ou CSS sont désactivés (ce qui n'est pas le cas si les images sont appellée via CSS, dans ce cas, on aura des liens vides, donc pas de liens)), même si pour 1% des visiteurs, il n'aura pas d'effet roll-over (qui n'est pas nécessaire à la navigation).

Problème résolu, merci de tes réponses complète Laurie-Anne qui m'ont fait comprendre que finalement le JS est mieux adapté

Encore pour aider ceux qui pourrait être dans mon problème et qui ne savent pas comment s'y prendre avec le JS, voici ce que vous devez faire :

       <li><a href="espace_particuliers.html"><img src='images/menu_lambda_1.png' alt="Espace Particuliers" border="0" onmouseover="this.src = 'images/menu_over_1.png';" onmouseout="this.src = 'images/menu_lambda_1.png';"></img></a></li>

Encore merci

Cocopop a écrit :
Problème résolu, ...

Ce serait super sympa de l'indiquer dans l'intitulé du sujet, alors...

Juste un dernier petit commentaire sur ton code:

<li><a href="espace_particuliers.html"><img src='images/menu_lambda_1.png' alt="Espace Particuliers" border="0" onmouseover="this.src = 'images/menu_over_1.png';" onmouseout="this.src = 'images/menu_lambda_1.png';"></img></a></li>

Pour être sûr que l'effet de hover fonctionne, même quand l'utilisateur navige au clavier, il serait préférable d'utiliser onfocus et onblur au lieu de onmouseover et onmouseoout (respectivement).

Laurie-Anne a écrit :
Juste un dernier petit commentaire sur ton code:

<li><a href="espace_particuliers.html"><img src='images/menu_lambda_1.png' alt="Espace Particuliers" border="0" onmouseover="this.src = 'images/menu_over_1.png';" onmouseout="this.src = 'images/menu_lambda_1.png';"></img></a></li>

Pour être sûr que l'effet de hover fonctionne, même quand l'utilisateur navige au clavier, il serait préférable d'utiliser onfocus et onblur au lieu de onmouseover et onmouseoout (respectivement).

Merci de cette petite précision forte utile

Je met ce sujet en résolu =)