Internet Explorer 5.5-6 doesn’t show transparent PNG pictures correctly in Windows. Transparent background appears grey.
We need to make transparent PNG pictures shown as through CSS (in background) as well through IMG tag.

You can fix this in Windows IE 5.5 or higher because the earlier versions doesn’t maintain a filter that could fix the problem with PNG transparency.
Internet Explorer 7 displays transparent PNG images correctly.

Solution

• Kopaev’s solution
• Use PNG Fix module
• Drew McLellans’ solution
• Lloyd Dalton’s solution – CSS only (no JS).
• PNG Behavior (using of .htc and 1px GIF files)
• Youngpup – IE behavior & 1px GIF (Aaron Boodman)

Kopaev’s solution

This solution is described in Ivan Kopaev’s article “Graphical Format PNG”.
Conditions:

• A picture must have png class.
• At least one dimension have to be set for a picture
• Background picture haven’t be duplicated.
• An element AlphaImageLoader filter is attached to haven’t be positioned (nor absolutely neither relative). Value of its property  position must be different from absolute and relative. Otherwise links will not work.
• Change “theme” to current Drupal theme name in the code
• Create _ie6.css file — external style table which contains all tools necessary to fix the problem with PNG transparency. It is to be put to a site root folder.
  

  .png {
  filter: expression(
  (runtimeStyle.filter == ”) ? runtimeStyle.filter = ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’+currentStyle.backgroundImage.split(‘\”‘)[1]+’, sizingMethod=crop)’ : runtimeStyle.filter,
  runtimeStyle.backgroundImage = ‘none’);
  }
  .png a { position: relative; }
  img.png {
  filter: expression(
  (runtimeStyle.filter == ”) ? runtimeStyle.filter = ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’+src+’, sizingMethod=scale)’ : ”,
  width = width,
  src = ‘/sites/all/themes/ тема /image/null.gif’);
  }

  • Download one-pixel transparent null.gif
• Place null.gif to images folder of a current theme.
• Place code for inserting of style table to page.tpl.php file:

<!–[if lte IE 6]>
<link rel=”STYLESHEET” type=”text/css” href=”/sites/all/themes/ тема /_ie6.css”>
<![endif]–>

A problem with links on PNG background

When AlphaImageLoader filter is applied to an element that has links the links stop working. A part of a link that is located on non-transparent area of PNG picture behaves as a usual text.

You should set negative positioning for such links to fix the problem:

.png a {
position: relative;
}

Please keep in mind that the element AlphaImageLoader filter is applied to haven’t be positioned nor absolutely neither relatively. Links wouldn’t work otherwise. To make links working in a block with filter and positioning you should divide positioning and filter: i.e. create an external block with positioning applied and set a filter to internal block.

Use PNG Fix module

Module page: http://drupal.org/project/pngfix.

This is the up-to-date method to maintain PNG transparency in IE5.5, IE6. It is based on using jQuery JavaScript library and script that fixes PNG transparency as an inserted image as well as a background. The script is simple in its using. It is CSS friendly – you can use transparent PNG pictures for backgrounds. Links also work correctly in transparent PNG pics.

Author of this method is: Andreas Eberhard, 2007

Known restrictions:

• Always defaults to “background-position:top left” and you cannot reposition it.

• Unable to perform “background-repeat:repeat-y” or “background-repeat:repeat-x” on a target.

• For the hack to work your item needs to be visible.

Application:

• Download jquery 1.2.1. or above and of course ifixpng.

• Save pixel.gif to images/pixel.gif.

• And finally initiate the plugin. See below. I used iMakePostable to make code below viewable).

Drew McLellans’ solution

• Works with both inline and background images, replacing the need for both sleight and bgsleight
• Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
• Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
• Detects background images set to no-repeat and sets the scaleMode tocroprather than scale.
• Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

Download the script

Application

Getting SuperSleight running on a page is quite straightforward, you just need to link the supplied JavaScript file (or the minified version if you prefer) into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.

<!–[if lte IE 6]>
<script type=”text/javascript” src=”supersleight-min.js”></script>
<![endif]–>

Source: /code/supersleight-transparent-png-in-ie6/3.txt

Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.

The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.

Lloyd Dalton’s solution

CSS only is used in this solution.

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores filters of MS pictures so will skip this */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’/75p_honey.png’);
}
/* IE ignores styles with [attributes] so it will skip the following. */
.trans_box2[class] {
background-image:url(/75p_honey.png);
}

HTML-code:

<div style=”float:left;background-image:url(/flowers.jpg);border:solid 1px #000;padding:10px;”>
<div class=”trans_box1″ style=”float:left;”>I like flowers.</div>
<div class=”trans_box1″ style=”float:left;”>They smell nice.</div>
<div class=”trans_box2″ style=”float:left;”><a href=”http://www.google.com/search?q=flowers+bees+honey”&gt;When combined with bees, they make honey…</a></div>

PNG Behavior

See this link for more details: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Youngpup – IE behavior & 1px GIF (Aaron Boodman)

See Youngpup – IE behavior & 1px GIF (Aaron Boodman)