Amazinzay.com

I’ll admit, with the release of IE7 with the tabbed browsing and the png support, I was beginning to think that maybe Internet Explorer wasn’t as bad as I thought, and that maybe I should give it another shot. I have since revised my position and returned to a state of loathing towards the monster called IE. My biggest problem with internet explorer 6 originally was the tabbed browsing. My second it’s lack of support for PNGs with variable transparency. When addons for FireFox came out, which helped improve my testing and development, it was the final nail in the coffin. Granted, I still have IEtab installed for the stubborn sites that refuse to support FireFox, but I use it sparingly. When IE7 came out, my views changed somewhat. PNG’s no longer had to be worked around to display correctly, and tabbed browsing removed the annoying new window for every page. I still didn’t like IE, but I no longer hated it. It seemed I could make peace with it’s flaws and horrible implementation of the Border-Box Model and be content….

Until I started working on my latest site. Then all the loathing I held for the vastly inferior browser came back like a storm. Hours upon hours of work spent trying to make a simple effect work. It turns out that instead of actually making IE actually support png’s like it should, the IE developers applied the same workaround that I had been using. They simply applied their filters to all png being rendered, which on the surface works, I never knew the difference. Untill… I was implementing a simple mouseover glow, simple enough. I simply created a png with the glow that I wanted, and use jquery to fade it in. It worked beautifully. I had written a generic function that allowed you to simply add a hover class to an image and name an image imagename_hover.jpg|png|gif|etc. and it would do a crossfade in and out of the image. I was so proud, until I saw it in IE. Oh the horror. The result showed a horrible gray fuzz behind any semi-transparent part of the image during the fade, which once the fade finished was removed. But it completely ruined the effect. I googled the problem and found out from the IE developer Sam Fortiner’s blog that

“applying a BasicImage filter with an opacity attribute to an IMG
element with a transparent PNG will fill the work surface with the
transparent PNG alpha alpha blended with a solid gray background.”

Everything I read said that the only workaround was to have the image inside of a div with a background color and fade in the div rather than the image. The problem with this was that my images were on a background image, so fading in a div with a background color would not achieve the desired effect at all.

I was finally able to achieve the effect by calculating the position of the image inside of the div which had the background, create a div with the same background-image and positioning it over the image and fading it in. The result was what I wanted, but the calculations were ridiculous. I did not want to lose the scalability of the site by simply hard-coding the divs in with absolute positioning. So I used Jquery to calculate the positioning. I am so frustrated that IE still does not fully support PNG transparency.

Needless to say I am frustrated