jQuery Cycle Plugin Ghosting with Transparent PNG's in IE

Some one please stop the Internet Explorer madness. I definitely don't want to become the IE go-to-guy. Back to programming Ruby next week, but today was finally getting the jQuery Cycle Plugin working nicely with transparent PNG's.

The issue: IE's handling of transparent PNG's causing ghosting or dark artifacts when animating with the opacity property. It appears I'm not the onlyperson who has come across this problem. So to get IE to play nicely with jQuery Cycle Plugin I need to apply UnitPNGFix to all versions of IE; this hack is typically used for Internet Explorer version 6.x.

This worked well, but I was getting intermittent errors from Cufón when applying the hack:

Attribute only valid on v:image

As suggested by the guys and gals at Media Dog, placing the UnitPNGFix after the Cufón script would resolve the problem. I had no such luck until I explicitly identified which PNG's to "fix" by specifying the classes with "unitPng". Admittedly this what I should have done in the beginning. Once I specified the elements to fix, IE worked flawlessly with the jQuery Plugin.

As a side note, I've never integrated Cufón into a project before. Does it tend to mess up layout in older browsers? When I say older, I mean Internet Explorer. It certainly generates a lot of HTML, and I'm not totally sure if people are aware of the legality converting fonts and having these openly available on the 'Net. Definitely something I need to further investigate.

IE7 CSS Madness

Inspired by blogs such as Pivotal Labs and Rails Test Prescriptions I am going to attempt to do a daily recap of yesterday's firsthand experiences. These are going to be short, brief posts. I was going to call it simply Standup but I thought it would be nice to tie the company name in. So here it goes:

Internet Explorer 7 CSS Madness

Yesterday I was thrown into cleaning up some front end CSS for IE7 late in the afternoon. Here's some tricks for kids:

• The drop-down of a select element in HTML does not expand it's width to display the longest option. Fixed using a JQuery plugin ie-select-width. There is also ie-select-style that allows you to style the select element.
• IE7 does not play nice with transparent PNG's and the  jQuery Cycle plugin. It tends to acquire the background colour of the parent element. The fix is to add "background: none !important" to the element containing the PNG image in the slideshow.