.hover et fadeTo sur un span, ok sur firefox mais problème sous ie

Bonjour,

Je viens vers vous car j'ai une difficulté qui me bloque un peu, je m'explique :

J'ai dans ma <div> une liste <ul> avec des <li> qui contiennent des images cliquables <a href=""=><img src=""></a> entourés d'un <span> pour interagir avec la souris.

voici ce que celà donne en image :

Sous firefox, une fois que l'on est sur la page en question :



Puis dès que l'on met la souris sur la première image :



Sous firefox tout est bon mais sur Internet Explorer, l'effet vient après cette image :

A la page en question j'obtiens sous IE ceci



au lieu de la même chose que firefox. Pouvez vous m'eclairer ?


voici mon code html :

div id="autres-realisations">
<h3>Autres réalisations</h3>
 clear 
<ul>
	<li><a class="thumb" style="background: url('http://localhost/wp-next/wp-content/themes/parallelus-mingle/assets/images/portfolio/vignettes/1.jpg') no-repeat scroll 0px -108px transparent;" href="http://localhost/wp-next/realisations/1/">
<span class="vignette-autres-realisations"><img src="http://localhost/wp-next/wp-content/themes/parallelus-mingle/assets/images/portfolio/vignettes/1.jpg" alt="" /></span></a><span class="titre-client-gris">1</span></li>
	<li><a class="thumb" style="background: url('http://localhost/wp-next/wp-content/themes/parallelus-mingle/assets/images/portfolio/vignettes/2.jpg') no-repeat scroll 0px -108px transparent;" href="http://localhost/wp-next/realisations/2/">
<span class="vignette-autres-realisations"><img src="http://localhost/wp-next/wp-content/themes/parallelus-mingle/assets/images/portfolio/vignettes/2.jpg" alt="" /></span></a><span class="titre-client-gris">2</span></li>
</ul>
</div>
 clear 

Mon code css :

#autres-realisations {
    background: url("http://localhost/wp-next/images/rea-similaires.jpg");
    float: left;
	width: 990px;
    margin-top: 15px;
}
#autres-realisations h3 {
    border: medium none;
    font-size: 20px;
    margin-bottom: 15px;
    text-indent: 0;
}

.vignette-autres-realisations {
    display: block;
    height: 108px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 109px;
}
#autres-realisations ul {
    height: 168px;
    list-style: none outside none;
    margin-bottom: 30px;
    margin-left: 85px;
    margin-top: 4px;
}
#autres-realisations li {
    float: left;
    margin-right: 30px;
}
#autres-realisations h3 {
    background-color: #FFFFFF;
    opacity: 0.7;
}
#autres-realisations li a {
    display: block;
    height: 108px;
    opacity: 0.8;
    position: relative;
    width: 109px;
}
.vignette-autres-realisations {
    display: block;
    height: 108px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 109px;
}
.titre-client-gris {
    background: url("http://localhost/wp-next/images/bg-client.jpg") no-repeat scroll 0 0 transparent;
    color: #AEAEAE;
    float: left;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    margin-top: 10px;
    opacity: 0;
    position: relative;
    text-align: center;
    width: 109px;
}

et mon code jquery :

jQuery("#autres-realisations ul li").hover(function(){jQuery(this).find("span").stop().fadeTo('fast',1);
jQuery(this).find("a").stop().fadeTo('fast',1);},function(){jQuery(this).find("span").stop().fadeTo('slow',0);jQuery(this).find("a").stop().fadeTo('slow',0.8);});

Modifié par sofiane06 (02 Aug 2012 - 15:39)

C'est bon, j'ai trouvé seul, et c'est vrai que opacity n'est pas pris en compte par IE dans les feuilles des styles, j'ai donc modifié mon fichier css et rajouter

filter:alpha(opacity=0);

avec celui existant

opacity: 0;

pareil lorsque l'opacité est a 0.7 ça donne alpha(opacity=70), etc..
Modifié par sofiane06 (02 Aug 2012 - 11:53)