Question

I’m trying to CSS use sprites to animate my Risk Matrix … it works just fine in Firefox and Chrome, but image won’t show up in IE …

The code is below, don’t want to paste the whole thing in here, but the excerpt shows the pattern:

<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 checked the styles with IE Dev. toolbar (i want firebug for IE), and all styles are in place, image in on the server, but it WON’T SHOW IN IE !!!

I’m prettty sure it’s some stupid IE CSS quirk, please help.

UPDATE: @RoBorg: your suggestion didn’t solve the problem, but it solved the ‘hover’ issue. The problem turned out to be in with the absolutely positioned outer div and some menu styles, those somehow screwed the whole thing up.

Answer 1

IE doesn’t apply :hover to <a>‘s without an href. This should work:

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