IE6 .PNG Transparency Hacks

The .PNG (Portable Network Graphics, PNGs not GIFs) has been around for years. Over a decade actually. Mid 1990’s (95-96) discussions arose revolving around the replacement for the popular .GIF format for various reasons: the 256 colour limit, the Unisys and LZW patent enforcement, among others. As of 2004 .PNG has been recognized as an International Standard (ISO/IEC 15948:2003).

With the web2.0 boom and exponential increase in popularity with xhtml/css in 2006/2006 the .PNG has also been embraced by the web development community. The shortcoming. however: IE6. IE6’s final release was in the summer of 2001, years before .PNG was adopted as a standard, thus IE6 does not support 24bit. As of January 2009 an astonishing 18.5% of Internet surfers are still browsing with 8 year old IE6, which handcuff’s many web developers who are not allowed to drop support for such a percentage (still 1/5th of the market). The Solution: IE6 .PNG transparency hacks.

There are many IE6 .PNG fixes floating around the Internet, but the one I have found most effective is the .HTC method offered by Twin Helix: It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. As of August 2008, v2.0 alpha 3 offers support for background tiling and positioning.

How to Get the .PNG Hack Working:

1. Open the .HTC file and look for the following line “IEPNGFix.blankImg”. This script applies all transparent .PNGs via a background property, so for tags, it makes use of a 1×1 transparent .GIF. To avoid getting IE’s red x, ensure this path points to a transparent .GIF. The path is relative to the .HTC file’s location.
2. Once updated, place the .HTC file in the root folder of your web site directory
3. In your CSS file, preferably an IE6 only stylesheet (see below) add the following: img, div { behavior: url(/path/to/iepngfix.htc) } amending the tag list to include everything you wish to have the filter applied to. See this tip for more details.
4. To make use of CSS properties including background-repeat and background-position you will need to add a javascript call to your html file: <script src=”path/to/iepngfix_tilebg.js” type=”text/javascript”></script>

Below are some of the ‘best practices‘ I have adopted when using this hack.

Make use of an IE6 Only stylesheet

I don’t recall the technical issues that arose, but IE7 did not play nicely with this script. Page loads became incredibly sluggish and the pc usage went haywire. The solution was simple: implement an IE6 only stylesheet. IE6 is the only browser that needs this script to support .PNG transparency, so keep your CSS files clear of any hiccups use the following code so it’s only active when someone browses your site with IE6:
<!–[if IE 6]>
<link rel=”stylesheet” href=”path/to/css/ie6.css” type=”text/css” media=”screen” />
<![endif]–>

Use the .PNG Hack Sparingly

This script runs a filter on every tag you assign to it via your stylesheet. As a result, if you use .PNGs frequently across a large variety of html elements, the number of elements to check and run the filter against will pile up dramatically. Some practices I’ve adopted for this are:

• Use a .GIF when available – .GIFs are still incrdibly handy for simple, light weight images like bullets or underlines, or background tiles that don’t require transparency. The fewer elements you assign to the HTC file, the fewer times it will run.
• In addition to using .GIFs, be more specific with your selectors – If you use a .PNG as a background image on 3 <DIV>s, there’s no sense in checking against every single one, so identify it specifically in your css declaration: img.photo, #checkList li, .widgetTile { behavior: url(/path/to/iepngfix.htc) }

Do Not Repeat Horizontally

This is a stupid bug I’ve noticed.

While v2 of this script supports background tiling and background positioning, I have noticed serious drops in performance when trying to repeat tiles horizontally. While it doesn’t provide a solution for wanting a .PNG background tile for the <BODY> element, a solution I’ve adopted is to identify the largest element that would make use of a certain .PNG tile, save it out at that size, then just let it overflow off smaller elements. For example:

I have a side column where I want all widgets to be wrapped in a semi-transparent box. I want my main column also to be wrapped with the same tile – I save out the .PNG to the width of the main column, then in my css declarations I assign the same background image with repeat-y on both classes. It’s the same theory as just using a 1×1 .PNG and tiling across both axes, just repeating only on the one and letting the extra just run off with the smaller elements.

Examples:

Below are links to test-development sites where I have implemented this fix in one form or another:

• Ideo Splash Concept
• Summer Travel Lander
• Professional Services Lander