Ich versuche, CSS verwenden Sprites, um meine Risiko-Matrix zu animieren ... es funktioniert ganz gut in Firefox und Chrome, aber das Bild wird nicht angezeigt in IE ...
Der Code steht unten, ich möchte nicht den ganzen Code hier einfügen, aber der Auszug zeigt das Muster:
<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;
}
Ich überprüfte die Stile mit IE Dev. Toolbar (ich will Firebug für IE), und alle Stile sind an Ort und Stelle, Bild in auf dem Server, aber es WON'T SHOW IN IE!!!
Ich bin mir ziemlich sicher, dass es eine dumme IE-CSS-Macke ist, bitte helfen Sie.
UPDATE: @RoBorg: Ihr Vorschlag hat das Problem nicht gelöst, aber das Problem des "Schwebens". Das Problem stellte sich heraus, dass es mit dem absolut positionierten äußeren Div und einigen Menüstilen zusammenhing, die irgendwie die ganze Sache vermasselten.