Question

I built a website and I have this png file which is a bordered image with drop shadow shading which looks fine in firefox, chrome, where the dropshadow is subtle and clean (just like it looks like in photoshop)

but when i view this in Internet explorer (6, 7 or 8), it shows up like this below:

where the drop shadow shows up as all black (no fading), and disjointed

again, this is just a pure image in an html page (not javascript drop shadow script or CSS)

does anyone have a suggestion on why png image would show up different on Internet Explorer.

Answer 1

i fixed it with a combination of things:

1. This css:

   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;
   }
   

2. Setting clearType = false in jquery cycle:

   $(function () {
      $('#s1').cycle({ fx: 'fade', speed: 1500, cleartype: false, timeout: 4500 });
    });