Neither IE7 nor IE8 render PNG transparency

Question

I've got an element, an image, defined as instrument in css and for the life of me I cannot get it to properly display a png with transparency in IE7 or IE8 -- works fine in Safari and FF. I really don't care about IE6 since it would need some sort of hack -- 7 and 8 should just work though, right? There shouldn't be anything else needed other than the call for the image in 7 and 8, right?

Here is the css for the element that needs to be transparent (instrument) and the element behind it

#instrument {
    width: 650px;
    height: 400px;
    position: relative;
    margin-left: 125px;
    top: 185px;
    overflow: hidden;
    z-index: 1;
}

#instback {
    margin-left: 50px;
    margin-top:86px;
    width: 450px;
    height: 442px;
    position: absolute;
    top: 102px;
    z-index: 0;
}

Is there anything here that looks like it could be screwing up? Here is a link to one of the PNGs.

2F.png

Thanks!

Answer 1

There is a style inline on the img with the background-color set to white.

background-color: #fffff;

Remove that, or set it to transparent, and it works in IE8. I'm guessing it's the fault of your fade code.