I'm using a 60% opacity PNG as a background on a div. It looks great all the browsers I've tried, but in IE 8 it's just a black (dark grey) blob. Any suggestions please.

2 answers

Ktash 1851
This was chosen as the best answer

Edit: just saw your post with a link to the page. Checked out your code, and the following CSS line is actually the culprit:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=145, Strength=3);

Not sure what this is to accomplish (looks like a shadow) but PNG support in IE8 is buggy, so overlaying it with other transparencies, or having a shadow won't quite work like you might expect.

Answered about 8 years ago by Ktash

please link to a test page so we can see what else might be affecting it.

Answered about 8 years ago by Tony Crockford
  • <!--[if lt IE 8]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix('#wrapper'); </script> <![endif]--> says less than (but not equal to) IE8 try it including IE8? Tony Crockford about 8 years ago
  • DD_Belated doesn't work with IE8 since MS broke VML... danwellman about 8 years ago
  • Noted, I'm a slacker... Must try harder in Future. :) Tony Crockford about 8 years ago
  • lol, it has bitten me too many times, is always an issue fading alpha-PNGs with jQuery in IE8 >< danwellman about 8 years ago
  • Thanks chaps. As always your help is fantastic. Ktash, i did suspect that bit of code, so I changed the colour to see the effect. Now of course I've removed it. sbl2000 about 8 years ago