Transparent PNG animate problem on Internet Explorer

Question

CSS Code:

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
         


        

Answer 1

Thanks to Julien for his answer, it lead me in the right direction!

However, I was still getting a gray halo around the text during the image opacity transition. It looked fine when it was static, but it was still creating a strange slight grey halo (IE 8). I fixed it by changing to the values below.

Also, I had to separately declare the "zoom: 1" property, because IE 8 was just smashing that value to the end the background property. Same thing with background-color: transparent; IE sucks.

My working CSS:

.classOfParentElement img {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
}

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

Note that I had to change endColorstr=#00FFFFFF to endColorstr=#FFFFFFFF.

To reiterate Julien, this solution came from Viget.com.