Making IE, jQuery fade effect, and transparent PNGs play nicely

I recently worked on a B2C project which had a quick-view “shopping bag”. Fading it in and out slowly caused a big black blob to display just before the fade effect is applied by jQuery in IE7, IE8 and possibly IE6. This was not an issue on Firefox, Chrome, Safari etc.

As designed, the shopping bag used a slow animated effect for fade-in and fade-out. Adding a bit of complexity was a drop-shadow surrounding the shopping bag. The drop-shadow used 3 transparent PNGs (top, middle, footer). The hook for the animation effect was a main div, which contained all 3 containers for the transparent PNG files.

Resolution
Apply the following CSS attributes to the transparent PNG image references. So if you’re using the images directly via img tags, then apply it to the img element. And if you’re using the transparent PNG images as a background element, apply it to the container.

For images:

img.shoppingBag {
   background-image: url('myTransparentPngFileTop.png');
   /* IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
   /* IE6 and IE7 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
   background-color: transparent;
   zoom: 1;
}

1
2
3
4
5
6
7
8
9

img.shoppingBag {
   background-image: url('myTransparentPngFileTop.png');
   /* IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
   /* IE6 and IE7 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
   background-color: transparent;
   zoom: 1;
}

For background images:

div.shoppingBagTop {
   background-image: url('myTransparentPngFileTop.png');
   /* IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
   /* IE6 and IE7 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
   background-color: transparent;
   zoom: 1;
}

1
2
3
4
5
6
7
8
9

div.shoppingBagTop {
   background-image: url('myTransparentPngFileTop.png');
   /* IE8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
   /* IE6 and IE7 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
   background-color: transparent;
   zoom: 1;
}