PNGs, Internet Explorer, CSS, and AlphaImageLoader
Wednesday, January 10. 2007
I spent about 6 hours today trying to apply the well-known PNG transparency filter to work with IE on a 1x1px background image. I had never tried it before, I always had the ability in my designs before to use other methods as a solution. This time I really didn't, and it was a poor place to spend 6 hours figuring it out (it was simply for aesthetics), but I also knew this was something I needed to add to my experience or else I'd have stumbling blocks later on in my more advanced designs.
So, after visiting over 80+ pages that covered Microsoft's proprietary CSS filter style for IE5.5+ and still not understanding (what-so-ever) why my implementation, which was exactly the same, wasn't working...I accidentally added a property to the wrong style definition and caused the problematic selection to give IE its hasLayout property. THAT FIXED IT. It's amazing that in all of the examples I had looked at, none of them stated that I needed hasLaout. QuirksMode said that IE's opacity filter required hasLayout, but I didn't read that until afterward (so I would assume any IE specific filter requires hasLayout). So, adding height or width (or any other property that forces hasLayout) will allow for the AlphaImageLoader filter to work. But, what else did I do (and other neat stuff did I find about PNGs)?
So, after visiting over 80+ pages that covered Microsoft's proprietary CSS filter style for IE5.5+ and still not understanding (what-so-ever) why my implementation, which was exactly the same, wasn't working...I accidentally added a property to the wrong style definition and caused the problematic selection to give IE its hasLayout property. THAT FIXED IT. It's amazing that in all of the examples I had looked at, none of them stated that I needed hasLaout. QuirksMode said that IE's opacity filter required hasLayout, but I didn't read that until afterward (so I would assume any IE specific filter requires hasLayout). So, adding height or width (or any other property that forces hasLayout) will allow for the AlphaImageLoader filter to work. But, what else did I do (and other neat stuff did I find about PNGs)?
Continue reading "PNGs, Internet Explorer, CSS, and AlphaImageLoader"
