We came across an error today without drop down menu system that uses a PNG-24 semi transparent drop shadow image around the border where the transparency would appear black in IE 7 and IE 8. After searching and trying all possible fixes we found the solution to the problem and it was quite simple.
Our menu system uses jQuery (doesn’t everything these days?), and had a nice fade in and fade out transition. jQuery handles the fade transitions by setting the opacity which IE does not like very much. So using the fadeTo() functions in jQuery is a no-no in IE. The solution, use hide() and show() instead. It’s not as elegant but the transparency issue was fixed on all modern browsers.
Other solutions to the problem include:
1. Using a background colour instead of transparent on the style so you would do:
.my-transparent-stuff{background: #fff url(‘image.png’) repeat-y scroll left top;}
instead of
.my-transparent-stuff{background: transparent url(‘image.png’) repeat-y scroll left top;}
2. Using PNG-8/transparent gifs (hey, it’s a solution)
3. Forcing IE8 into IE7 mode by adding the following meta tag:
<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />
I still can’t understand what Microsoft is doing!





Tick, Tick, Tick
Be strong,
The waves vibrate
And message delivered.
Fear abandoned,
The source is I.