Dealing with IE 5.5+ when using PNG Transparency

Filed under: Design — Micheal on October 12th, 2007

Most modern browsers support PNG transparency quite nicely (IE 7 still has problems). There has been a large migration to Internet Explorer 7; however, there is still a large amount of people using IE 6. I still get about 30% of IE 6 users. Depending on the purpose of the site, I see no problem in using transparency in PNG’s. I am not a fan of mixing JavaScript with design, but the following solution works nicely. Keep in mind that there can be small delay inbetween the time the page is loaded and the JavaScript is applied, ussually only noticable if the images are large. In CSS, all that needs to be done is to call a behavior attribute that points to the .htc file containing the JavaScript. The “behavior” attribute needs to be applied to whatever element containing PNG’s with transparency. This can be as easy as:

img {
  behavior: url(iepngfix.htc);
}

If you are anal like me, you are going to want your CSS to validate. Due to the behavior attribute being proprietary to IE, it is recommended to split off the CSS so it is only seen by IE 5.5 and IE 6.

To download the iepngfix.htc and to view an example, go to: http://www.twinhelix.com/css/iepngfix/demo/

For individuals that care
I enjoy pushing my skills to the edge and always trying to approve upon what I know. HybridMinded.com is a good example of my love for patterns, gradients, and transparency. While the background attribute in web design is sometimes overlooked or given little thought, it can be a very powerful when used correctly.