CSS Image Replacement Not Working in IE

Hi all,

I'm really baffled as to why this code is not replacing the images on :hover in IE.

Could anyone give me a pointer or two? Thank you so much if so. :)

Stylesheet:


#header {
margin-left: auto;
margin-right: auto;
position: relative;
width: 950px;
height: 100px;
background-image: url("img/headerimg.png");
background-repeat: no-repeat;
text-align: left;
}

#header a:hover {
border: none;
opacity: 0.0;
filter: alpha(opacity=0);
z-index: -1;
}


Web Page:


<div id="header">
<a href="#"><img src="img/image1.png" /></a><a href="#"><img src="img/image2.png" /></a><a href="#"><img src="img/image3.png" /></a>
</div>


Thanks.

I'm really baffled as to why this code is not replacing the images on :hover in IE. I don't see any code to "replace" something in your post. And a negative z-index does not hide an element in IE, as a standard browser like FIrefox