Jan
10
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)?
Just to be complete in case someone finds this on a web search, the filter is as follows:
Scale will stretch the image to fit the constraints, or stretch the constraints to fit the image (depending on the sizes). 'crop' will cut the image where the bounds of the selection are. 'image' is default behavior, can't remember what that does. You can read Microsoft's information about it if you're really interested.
Also, in order to prevent this from screwing up anything, I used this in a conditional stylesheet, and I let the more popular and standards compliant browsers access the transparent background using the following CSS selector method:
The [class] is not a filler word, it should literally be "class". Look up attribute selectors to understand why this works.
Anyhow, the magic is that IE6 doesn't understand it, but all other major browsers do (or should). I haven't tested IE7, but if IE7 doesn't work properly, I can just extend my conditional CSS to work with it (IE7) as well...simple.
The other interesting thing I came across while looking for solutions to PNG transparency was how IE (and sometimes Opera) will render PNGs with differing colors than that of what it actually should be. Apparently there's a problem with gamma layers (or information) within the image, and traditional art programs do not (usually) apply the optimizations necessary to fix this problem since the browsers get confused with these extra layers of data...so not only do the three following applications (that do the same thing, but I haven't compared them to eachother for efficiency or features) supposedly fix this, but by doing so they also optimize the image's size, decreasing it by quite a bit using compression as well as removing extra data...and it makes it work better! I'm sold...
pngout, PNGcrush, and a fork of PNGcrush, OptiPNG. Jonathan Snook of famed proportions has an entry on his blog about these tools, and also links to some GUI based versions that will help to automate the task.
Hopefully some of this information will be useful to someone else...afterall, it did take me 6 hours to find this stuff (well, off and on, I was also helping my boss with our managed switch failure).
...now there is one problem!
External CSS files will link to images based on the main CSS file's path location. However, the filter property will link to images based on the calling HTML path...so, without using absolute paths, can anyone think of a solution to this? This is my only last stumbling block since I'm not (yet) using a bootstrapping file scheme.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader»
(src='myimage.png',sizingMethod='scale');Scale will stretch the image to fit the constraints, or stretch the constraints to fit the image (depending on the sizes). 'crop' will cut the image where the bounds of the selection are. 'image' is default behavior, can't remember what that does. You can read Microsoft's information about it if you're really interested.
Also, in order to prevent this from screwing up anything, I used this in a conditional stylesheet, and I let the more popular and standards compliant browsers access the transparent background using the following CSS selector method:
#something_id .class_if_exists[class] {
background: url('../images/transparent.png') transparent repeat;
}The [class] is not a filler word, it should literally be "class". Look up attribute selectors to understand why this works.
Anyhow, the magic is that IE6 doesn't understand it, but all other major browsers do (or should). I haven't tested IE7, but if IE7 doesn't work properly, I can just extend my conditional CSS to work with it (IE7) as well...simple.The other interesting thing I came across while looking for solutions to PNG transparency was how IE (and sometimes Opera) will render PNGs with differing colors than that of what it actually should be. Apparently there's a problem with gamma layers (or information) within the image, and traditional art programs do not (usually) apply the optimizations necessary to fix this problem since the browsers get confused with these extra layers of data...so not only do the three following applications (that do the same thing, but I haven't compared them to eachother for efficiency or features) supposedly fix this, but by doing so they also optimize the image's size, decreasing it by quite a bit using compression as well as removing extra data...and it makes it work better! I'm sold...
pngout, PNGcrush, and a fork of PNGcrush, OptiPNG. Jonathan Snook of famed proportions has an entry on his blog about these tools, and also links to some GUI based versions that will help to automate the task.
Hopefully some of this information will be useful to someone else...afterall, it did take me 6 hours to find this stuff (well, off and on, I was also helping my boss with our managed switch failure).
...now there is one problem!
External CSS files will link to images based on the main CSS file's path location. However, the filter property will link to images based on the calling HTML path...so, without using absolute paths, can anyone think of a solution to this? This is my only last stumbling block since I'm not (yet) using a bootstrapping file scheme.
0 Trackbacks