The Problem with .PNG
What do you think of when you read or hear the term “transparency” in a web related conversations?
.png might be some peoples answer. “UGH!”, could be a common answer also. If you go to my website you’ll notice some ink splatter headers that sit throughout the design. I had quite a hard time getting those to display correctly thanks to Internet Explorers lack of native png transparency support. It is one of THE most complained about topics on the web (and I have done my fair share of it). People have been asking for the support since BEFORE version 5.0 but today, there are still a lot of hacks and “fixes”, it shouldn’t be that hard to use transparency.
Here’s an example of a browser that supports png transparency, and IEs lack of it.
no png support
Market Share – The reason it is such a hugely discussed topic is because IE has over 75% of the browser market share. (between versions 6 and 7) Check it out:
browser market share
That is a huge amount! It would probably be safe to say that everyone who owns a PC and is not working in the web industry is using Internet Explorer to browse websites. With the exception of those handful of people related to somebody that works in this industry, hah!
The workarounds for fixing the transparency problem
These are some, but not all of the workarounds, new ways are being created frequently but these are the ones we will explain below.
Twin Helix iepngfix.htc
I ran into this fix for png transparency when I was developing my site. It is probably one of the easiest fixes out there to get working. All you need is a blank .gif image and to initiate the script via your stylesheet:
Example – initiating iepngfix.htc script
/* or you can target specific elements and their backgrounds /*
Of course this is considered a “hack” and it has some limitations to it
For 100% dependability, your elements should not have any auto-widths or heights.
Sometimes you’ll get flickering. It’ll display the broken png for a second before the script kicks in.
Can’t be used on repeating background images.
For more on this method you can go to TwinHelix.com or straight to his demo page
Example – applying filters to .png for correct ie6 display
// apply to all images
// apply to target elements
This fix also has its limitations
Always defaults to “background-position:top left” and you cannot reposition it.
Also doesn’t work on repeated backgrounds
for more on this method checkout the demo page
If you’re feeling lazy, or don’t want to use any scripts to add the filter you can do it manually. Be wary if you decide to use it on repeating backgrounds, it will make any text un-selectable and any links un-clickable in the target element.
Example – applying AlphaImageLoader
You can read up on all the parameters of the filter on the Microsoft site.
Moving Forward with PNGs
There are some beautiful sites on the web right now using transparent elements in their design and you should check them out for some great inspiration.
The fixes mentioned above aren’t as good as native transparency support, but they work and that’s what counts. If you have other methods or would like to mention a good site using transparency please comment below and share with us.