positioning and image tranparency failure on IE 8

i am trying to put few images on top of another image, and then i am fading in and out those images on top, here's my css:

#spark1 {
    bottom: 211px;
    left: 252px;
    position: relative;
    width: 75px;
}
#spark2 {
    bottom: 100px;
    left: 286px;
    position: relative;
    width: 50px;
}

my HTML:

<div id="spark1">
    <img src="clientside/images/big_sparkle.png" />
</div>
<div id="spark2">
    <img src="clientside/images/little_sparkle.png" />
</div>

my fade effect (in case this has anything to do with the problem i am facing)

$(function(){
    setInterval(function() {
        $('#spark1').fadeOut(800).fadeIn(800);
        $('#spark2').fadeOut(1000).fadeIn(1000);
    }, 2000);
});

Everything looks good on firefox and chrome, however on IE 8 (havent tested on any earlier versions of IE), the sparkle images is having a wrong positioning and it has a black background instead of transparent, how can i handle this ?? thanks

Regards 开发者_如何转开发

Update:

i have tried few css workaround, but nothing seems to work (probably because i am applying it the wrong way :p), but finally i have found a slight convenient solution, i put this line after my jquery fade effect:

$("#spark1").css('filter', 'none');

and this css to my img:

#spark1 img{
        background: transparent;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";  IE8    
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);    IE6 & 7 */      
        zoom: 1;
    }

thanks for pekka for pointing me out to those articles, i think i am going to stick on to this solution for now

If your PNGs have alpha transparency, there is in fact a bug that persists even in IE8: Images with alpha transparency cannot be made transparent (= given a opacity value other than 1).

See this question for background info and workarounds.