[RESOLU] [IE7] Problème de z-index sur info-bulle

Bonsoir à tous,

Il y a quelque temps que j'ai mis en place les infos-bulles sur mlon site (et notamment grace à la précieuse aide de ghost )
Il s'agissait de l'info bulle classique que l'on mettait sur la balise <a> (et qui marchait donc sur IE et FF)

Or comme je trouvais que cela pouvait être mauvais pour le référencement (un lien avec du texte à rallonge dedans), j'ai décidé de mettre l'info-bulle sur ma balise <li> même si les utilisateurs d'IE6 seraient pénalisés (à cause du non support de la pseudo-classe hover)

Bon bref, j'ai mis le nouveau css en place mais si sous IE6 & FF, le comportement est OK, sous IE7, l'info bulle passe en dessous des images de la balise <li> suivante

J'ai testé différentes choses avec le z-index mais sans succès. Peut-être pouvez-vous m'aiguiller...

Le lien : http://www.rapidojeux.com/v2/jeux-reflexion-nom, 1.html
Le code :

.req_jeux {
	float: left;
	margin-top: 4px;
}
.req_jeux li {
  float: left;
  position: relative;
  display: inline;
  margin-bottom: 15px;
  margin-left: 6px;
  width: 210px;
  font-size: 0.8em;
} 
.req_jeux a {
	display: block;
  	position:relative;
}
.req_jeux a:hover {
  	text-decoration: none;
  	background: none;
}
.req_jeux li span {display: none;}
.req_jeux li:hover span {
 	display: block; 
 	position: absolute; 
 	top:-30px;
 	left:100px;
 	z-index: 50;
	color: #000;
  	border: 1px solid black;
	background-color: lightyellow;
  	width:200px;
  	text-align:left;
  	font-weight:normal;
  	font-size: 10px;
  	line-height:12px;
	/*height: 36px;*/
	min-height: 36px;
 	padding:2px 4px;
}
html>body .req_jeux a:hover span  { /*pour retablir le height du dessus sous IE*/
height: auto;
min-height: 36px;
}
.req_jeux li img.bulle {
position: absolute;
z-index:50;
top: 20px;
left: -15px;
width: 15px;
height: 15px;
}
.req_jeux img {
	float:left;
	margin-right: 3px;
}

<ul class="req_jeux">
<li><span><img src="img_bulle" class="bulle" />Texte bulle</span><a href="" title=""><img src="" width="90" height="60" alt="3 Lines" /><h3>3 Lines</h3></a>> Note: 3.67/5<br /><div style="height:15px;"><a href=""><img src="" title="Voir tous les jeux en Flash" height="20" width="20" /></a></div></li>
<li><span><img src="img_bulle" class="bulle" />Texte bulle</span><a href="" title=""><img src="" width="90" height="60" alt="3 Lines" /><h3>3 Lines</h3></a>> Note: 3.67/5<br /><div style="height:15px;"><a href=""><img src="" title="Voir tous les jeux en Flash" height="20" width="20" /></a></div></li>
...
</ul>

Modifié par jojo3c (04 Sep 2007 - 22:07)

Bon j'ai continué mes tests et j'ai trouvé une piste.

A priori, mes <li> ont le même z-index donc la bulle n'arrive pas à passer au-dessus. Ca marche si je spécifie pour le premier <li> un z-index:100 puis pour le 2e <li> un z-index:99 et ainsi de suite...

Mais bon c'est pas tip-top ça (je serais obligé de générer les z-index à la volée en php).

Comment puis-je le contourner ?
Modifié par jojo3c (03 Sep 2007 - 22:23)

Bon j'ai ma réponse :

.req_jeux li:hover {
  	text-decoration: none;
  	background: none;
	z-index:50;
}

Modifié par jojo3c (04 Sep 2007 - 22:05)