CSS layer rollover doesnt work in explorer

[cssArchie]

Hi Folks, i got this CSS code:

<style type="text/css">
#roll {display:block; background-image:url(xxx/yyy.jpg); width:520px; height:95px;}
#roll:hover { background-image:url(xxx/zzz.jpg);}
</style>
<div id="roll" style="position:absolute; left:0px; top:231px; width:520px; height:95px; z-index:5; visibility: visible;"></div>

It works perfect with chrome and firefox, but it didnt shown the second picture in IE. Any ideas what should i do? PLZ type the code for an explanation. TY :)

[drhowarddrfine]

Works for me. Which version of IE. No one version works like any of the others or like any modern browser.

[cssArchie]

i have IE8 - 8.0.7600

but i found it out. i posting the code how it works in the most browser includet IE

<style type="text/css">
a#roll{

display:block;
width:300px;
height:95px;
background: transparent url(xxx/yyy.jpg) 0px 0px no-repeat;
text-indent:-9000%;

}

a:hover#roll{

background: transparent url(xxx/zzz.jpg) 0px 0px no-repeat;

}
</style>

<a href="#" id="roll"><img src="xxx/yyy.jpg" width="300" height="95" style="border:none;"></a>

hope it will help others too.