Infobulle CSS et IE

Bonjour à tous

Encore une fois, je viens vous demander de l'aide sur un problème de compatibilité avec Internet Explorer.

Il s'agit d'infobulles en CSS qui affichent des informations sur une liste de chaînes pour la télévision Orange.

Le problème est que l'infobulle s'affiche au survol des images mais ces images sont affichées devant l'infobulle, alors que je voudrais que ça soit l'infobulle qui soit visible évidemment.

Voici une page concernée : http://www.orangeinfo.fr/chaines-orange-tv-adsl

Voici le code CSS en rapport :

/* css/tooltip.css -- fancy tooltips */

span.tool {
  position: relative;   /* this is key */
  cursor: help;
}


 
span.tool span.tip {
  display: none;        /* so is this */
}

/* tooltip will display on :hover event */
 
span.tool:hover span.tip {
  display: block;
  z-index: 1000;
  position: absolute;
  top: 1.6em;
  left: 0;
  width: 200px;
  padding: 3px 7px 4px 6px;
  border: 1px solid #6c4e25;
  background-color: #f7f7ee;
  font: normal 0.9em/1.4em arial, helvetica, sans-serif;
  text-align: left;
  color: #000;
}

span.tool:hover span.tip del{
color: #C0C0C0;
}


#content span.tool::after {
  padding-left: 2px;            /* eye candy */
  content: url(/img/bubble.gif);
}

/* css/tooltip.css */

Merci d'avance pour votre aide
Modifié par Kwakwa (24 Feb 2011 - 22:19)

Bonsoir,

J'ai testé ta page sur IETester, c'est bien sur IE7 que se pose ce problème ?

A vu d'oeil, rien de bien particulier mais je pencherai pour le "z-index" qui est très certainement mal interprété par IE7.

En effet, le coquin gère cette propriété très mal, ou en tout cas différemment comme tu peux le voir dans cet article.

Je n'ai pas de PC Windows sous la main pour le moment mais il me semble que même sur IE8 il y avait le bug.

J'ai déja testé z-index en appliquant un z-index inférieur à tous les logos des chaînes et un supérieur au span mais aucun résultat ...

Merci pour ta réponse en tout cas je vais tester la solution donné quand j'aurais un PC sous la main.