How to Compensate for IE6's Lack of Support for Transparent PNGs

UPDATE: It has been announced by Microsoft that they will no longer support Internet Explorer beginning on July 15, 2022.

Thankfully, the percentage of people who still use Internet Explorer 6 (IE6) is dwindling monthly but it’s still sizable enough that we need to take those users into consideration when designing websites. This article shows how to include semi-transparent PNGs (Portable Network Graphics) in your forms and have them displayed correctly in most browsers, including IE6. There are actually several ways to accomplish this, each with its drawback but research suggests that the DD_belatedPNG fix is quickly becoming the preferred method. And so, that is the one we will deal with here.

This page contains a form whose background is fully transparent and overlaid with a tiled image of an apple that is a semi-transparent PNG. Were the DD_belatedPNG fix not employed on the page, IE6 users would see a form having a white background decorated with apples while others would see the apples casting their shadows on the patterned background of the page. Not that there’s anything necessarily wrong with having a white background. As a matter of fact, the heading and sub labels would be more readable in this instance. However, this article isn’t about readability but rather getting your forms containing semi-transparent PNGs to display as consistently as possible across browsers.

The Procedure

1. Copy the full source of your form from the Embed Form Wizard and paste it into the body of your web page

2. Place the code block found here into the head of the same page, according to the instructions

3. Copy this code, paste it into a new plain text document, save it as DD_belatedPNG_0.0.8a.js and upload it to the same directory (folder) that contains the web page with the form.

4.  See also: How to Make the Background of a Form TransparentHow to Adjust the Opacity of a Form’s Background