Attibut data-tip et z-index

Bonjour,
je ne sais pas pourquoi l'info bulle data-tip apparait en dessous de l'image sous internet explorer inférieur à 9.

voici le css :

[i]
[#darkblue]#plansite{
border: none;
position: relative;
height: 140px;
width: 140px;
left: -15px;
top: 25px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

[#blue]#plansite:hover[/#] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
#plansite img{
border: none;
filter: 
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/plansiteV3.png', 
sizingMethod='image');
}[/i][/#]

[i]
[#red][data-tip] {
    position: relative;
    cursor: pointer;
    text-decoration: none;
}
[data-tip]:hover:after {
    content: attr(data-tip);
    position: absolute;
    top: -0.5em; left: 50%;
    white-space: nowrap;
    padding: 5px 10px;
    background: #cb7abc;
    color: #fff;
    font-family: "Trebuchet MS", tahoma, arial;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    border-radius: 10px;
    [#red]z-index: 1000;[/#] /* On définit une valeur pour l'ordre d'affichage. */	
}[/i][/#]

ET MON CODE HTML surement un peu tordue n'est-ce pas ?

[i]
[#green]<section class="bandeau gauche">
   <ul>
       <li id="plansite">
       <figure><figcaption><a href="plan-du-site.html" data-tip="Plan de site"><img src="../img/plansiteV3.png" alt="Plan du site" ></a></figcaption></figure>
       </li>
       <li..>
       <figure><figcaption><a...>...</a></figcaption></figure>
       </li>
     </ul>
</section>[/#]
[/i]

Modifié par tonyvincennes (26 Oct 2012 - 11:19)

peut-on mettre une classe conditionnelle comme ceci ?

<section class="bandeau gauche">
[#blue]<ul>[/#]
[#green]<!--[if lt IE 9]>[/#]
	[#cyan]<li id="plansite"[/#]><figure><a href="plan-du-site.html">[#violet]<img src="../img/plansiteV3.png"  alt="Plan du site" title="Plan du site">[/#]<figcaption>Plan du site</figcaption></a></figure>
	[#darkblue]</li>[/#]
[#olive]<![endif]-->[/#]
[#green]<!--[if (gte IE 9)&(!IE)]>[/#]
       [#cyan]<li id="plansite">[/#]
	  <figure><figcaption><a href="plan-du-site.html" data-tip="Plan de site">[#violet]<img src="../img/plansiteV3.png" alt="Plan du site" >[/#]</a></figcaption></figure>
       [#darkblue]</li>[/#]
[#olive]<![endif]-->[/#]
[#blue]</ul>[/#]
</section>

Modifié par tonyvincennes (26 Oct 2012 - 11:32)