We came across an error today with our 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!
