2009-02-18 7 views
2

J'essaie d'utiliser des sprites CSS pour animer ma Risk Matrix ... ça fonctionne très bien dans Firefox et Chrome, mais l'image n'apparaîtra pas dans IE ...Les sprites CSS ne fonctionnent pas dans IE [8/7/6]

le code est ci-dessous, ne veulent pas coller tout ça ici, mais l'extrait montre le schéma:

<dl id="rmMap4x4"> 
<dd id="m4p4s1"> 
<a onclick="setDropDownListValues(4,1,3,4)" onmouseover="setDropDownListValues(4,1,-1,4)"> 
</a> 
</dd> 
<dd id="m4p3s1"> 
<a onclick="setDropDownListValues(3,1,2,4)" onmouseover="setDropDownListValues(3,1,-1,4)"> 
</a> 
</dd> 
... 
</dl> 

CSS:

dl#rmMap4x4 
{ 
background: url(/images/RiskMatrix_4x4.png) no-repeat scroll left top; 
height: 400px; 
margin: 0pt; 
padding: 0pt; 
position: relative; 
width: 400px; 
} 
/*column 1*/ 
dd#m4p4s1 a 
{ 
top: 99px; 
left: 99px; 
} 
dd#m4p4s1 a:hover 
{ 
position: absolute; 
background: url(/images/RiskMatrix_4x4.png) -98px -500px no-repeat; 
top: 100px; 
left: 99px; 
} 
dd#m4p3s1 a 
{ 
top: 149px; 
left: 99px; 
} 
dd#m4p3s1 a:hover 
{ 
position: absolute; 
background: url(/images/RiskMatrix_4x4.png) -98px -550px no-repeat; 
top: 150px; 
left: 99px; 
} 

I vérifié les styles avec IE Dev. barre d'outils (je veux firebug pour IE), et tous les styles sont en place, l'image sur le serveur, mais il ne sera pas montrer dans IE !!!

Je suis bien sûr que c'est un peu stupide IE CSS Quirk, s'il vous plaît aider.

MISE À JOUR: @RoBorg: votre suggestion n'a pas résolu le problème, mais elle a résolu le problème du "hover". Le problème s'est avéré être avec la div extérieure absolument positionnée et certains styles de menu, ceux-ci en quelque sorte vissé le tout.

Répondre

12

IE ne s'applique pas :hover à <a> sans href. Cela devrait fonctionner:

<a href="#" onclick="setDropDownListValues(3,1,2,4); return false;" 
    onmouseover="setDropDownListValues(3,1,-1,4);"> 
Questions connexes