Problème de sprites sous internet explorer 6 7 8

Bonjour à tous !

Je ne sais pas si j'ai posté au bon endroit, si c'est le cas toutes mes excuses.

Comme le dit le titre, j'ai un problème de sprites sous internet explorer 6 7 et 8. En effet, on a décidé de faire un menu avec des image en sprite et sous firefox, opéra et chrome aucun problème n’apparait tandis que sous internet explorer soit les images du menu n'apparaissent pas mais on peut quand même cliquer sur "l'espace vide" où devrait être les images, soit le menu est présent mais lorsque que l'on clique sur les différentes images du menu, elles disparaissent. Je vous met le code utilisé :

Le code Html :

<div id="menu" class="grid_5 suffix_1">
        <ul> 
          <li><a id="m-home" href="<?php bloginfo('url'); ?>" title="aller à l'accueil">home</a></li> 
          <li><a id="m-services" href="<?php bloginfo('url'); ?>/services" title="aller aux services">services</a></li> 
          <li><a id="m-creas" href="<?php bloginfo('url'); ?>/creations" title="aller aux créations">créations</a></li> 
          <li><a id="m-actus" href="<?php bloginfo('url'); ?>/actualites" title="aller aux actualités">actualités</a></li> 
          <li><a id="m-contact" href="<?php bloginfo('url'); ?>/contact" title="aller à la page contact">contact</a></li> 
        </ul>       
      </div>

Le code css :

#menu {
  width: 380px;
  height: 70px;
  margin: 60px 0 0 0; 
  padding: 0;
  list-style-type: none;
}

#menu li {
    float: left;
    display: inline;
    margin: 0 7px;
}

#menu li a { 
    display: block;
    width: 61px;
    height: 70px;
    text-decoration:  none;
    text-indent: -5000px;
}


#menu li a#m-home:link {background: url(images/home.png);}
#menu li a#m-home:hover {background-position: 0 -70px;}
#menu li a#m-services:link {background: url(images/services.png);}
#menu li a#m-services:hover {background-position: 0 -70px;}
#menu li a#m-creas:link {background: url(images/creations.png);}
#menu li a#m-creas:hover {background-position: 0 -70px;}
#menu li a#m-actus:link {background: url(images/actus.png);}
#menu li a#m-actus:hover {background-position: 0 -70px;}
#menu li a#m-contact:link {background: url(images/contact.png);}
#menu li a#m-contact:hover {background-position: 0 -70px;}

J'avais vu sur un autre sujet que le problème avec un des sprites était dû au text-indent mais ça n'avais pas l'air dêtre ça quand on a changé le code.

Merci d'avance pour votre temps!

Essaye la propriété background-image à la place de background.

Je ne suis pas sûr mais j'essayerais aussi d'enlever le :link.

si tu as un liens, se serait utile.

Bonjour,

j'ai essayé de mettre background-image à la place de background mais ça n'a pas pas régler le problème.

Sinon pour le lien j'ai oublié de le poster en même temps donc je le met maintenant :

http://www.adrienguidis.fr/wordpress/

Après quelques recherches, j'ai remarqué que de nombreux problèmes sur internet explorer 6 7 et 8 étaient causé par le text-indent mais je ne vois pas si ça explique mon problème.

Voila je vais continuer à chercher et je vous remercie d'avance!

Bonjour,

kib a écrit :
Après quelques recherches, j'ai remarqué que de nombreux problèmes sur internet explorer 6 7 et 8 étaient causé par le text-indent mais je ne vois pas si ça explique mon problème.

Ta technique à base de text-indent pose de nombreux problème d'accessibilité, et tu le constate d'ailleurs avec IE : quand l'image ne se charge pas, tu perds ton menu.

Les images porteuses de contenu doivent toujours se trouver dans le code HTML de la page et non en fond dans le CSS. Ton effet de survol devrait donc se gérer avec JavaScript.


Bon après, je ne constate pas le problème sous IE8...