I read somewhere that Internet Explorer 8 was supposed to be the end-all-be-all for web browsers developed in a Seattle suburb. It was going to grab a web designer and love them and hold them and even name them George.

But, sadly, like previous of Internet Explorer, it does have it’s shortcomings. This time, though, it removed a feature that actually existed in previous iterations: the opacity filter. Sure they could’ve just implemented the CSS standard for opacity, but that would have been both smart and easy, and we all know Redmond doesn’t want to do that.

What to do, what to do

Despite declarations that it was back, nothing ever worked. No hack. No filter. No custom CSS implementation. Nothing. After bashing my head on my desk for a good 30 minutes, I said to myself, “Self, why can we just use a transparent PNG to handle the background opacity?” DING! (or PNG!)

In my mock-up, I adjusted the opacity of the area I wanted to have a little see-through and grabbed a 5×5 swath of the area and saved it as a transparent PNG-24. Plugged in as a backgorund, and bickity-bam, I had a transparent background with an opacity of 90% that works in both Firefox and Internet Explorer 8. I’m assuming they’ll work in Safari and Chrome because those browsers are pretty standards-compliant when it comes to transparent PNGs. It should work in Internet Explorer 7 because I know it’s pretty friendly to the PNG. If you have Internet Explorer 6, upgrade already. You’re hurting America.

Added Bonus

It should be noted that this workaround (not hack) will not cause your text to be dithered out. It stays clear as day. Also, the 5×5 was only 117 bytes so the file size was really small.