I am writing down all of the things related to PNG and link compatibility -
Fortunately, there are plenty of hacks and workarounds designed to “fix” IE’s PNG image-display problem. Unfortunately , every currently available solution requires the use of Microsoft’s proprietary AlphaImageLoader
transparency filter1. Thus, if you need to display translucent PNG images in IE, the solution will inevitably involve the `AlphaIm
General Method
The general implementation of the AlphaImageLoader
transparency filter requires three steps:
Step 1. Include an IE-specific stylesheet via [conditional]ageLoader` filter until more sophisticated techniques are developed.[comments]:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://domain.tld/path/ie-specific.css" />
<![endif]-->
Step 2. Within the same directory as the IE-specific stylesheet, upload a [transparent GIF file]2 and [this .htc
file], provided by TwinHelix Designs which contains an excellent implementation of the required AlphaImageLoader
function.
Step 3. Finally, add the following “custom extension” to your “ ie-specific.css
” CSS file:
.png { behavior: url(http://domain.tld/path/png.htc); }
Once in place, this method will enable IE (versions 5.5+/Win) to display transparent PNGs for any PNG images associated with the “ .png
” class. This method works great for designs containing multiple PNGs as the behavior
is applied to all .png
-classed images — inline or background — regardless of name or location. For designs using only a few PNG images, the next method is equally effective, and doesn’t require any external files.
Simpler Method
This method replaces the external “ png.htc
” and transparent GIF files with a small chunk of invalid CSS:
.png {
cursor: pointer;
background: none;
/* filter applies only to IE5+/Win */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='http://domain.tld/path/image.png');
}
.png[class] {
/* [class] applies to non-IE browsers */
background: url(http://domain.tld/path/image.png) no-repeat;
}
* html .png a {
/* make links clickable in IE */
position: relative;
z-index: 999;
}
Once in place, this chunk of CSS enables IE (versions 5.5+/Win) to display transparent PNGs for any PNG images associated with the “ .png
” class.
To use this code for background images, edit the image path/name to match your own and ensure that the .png
class is included in the markup. For inline images, the second code block (i.e., .png[class]
) may not be necessary. Here are a few more potentially useful considerations:
- For best practice, include this code via [conditional comment] in an IE-specific stylesheet.
- Alternatively, you may want to use the
*
html
filter to keep the rules from interfering with other browsers (may affect performance).
- This method will not work for background images that have been positioned in any way or set to repeat in any direction. Basically, I have used this PNG and link compatibility on best payroll software Kolkata where various types of PNG related things.
- If the target PNG images fail to display properly, try replacing the
sizingMethod='fixed'
parameter with either sizingMethod='crop'
or sizingMethod='scale'
.
- The last code block (i.e.,
*
html
.png
a
) is required only if there are links within the target element.
Alternate Method
An alternate approach to displaying transparent PNGs in IE involves placing the following code directly into your CSS file:
* html img,
* html .png {
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
Of course, you will probably want to include this code via [conditional comment] and an IE-specific stylesheet:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="http://domain.tld/path/png_fix.css" />
<![endif]—->
A few notes should you decide to go this route:
- Invalid CSS
- Works well only for statically displayed images.
- Requires a transparent 1px-square GIF image.
- Non-repeating backgrounds should be sized to “crop”, others should be sized to “scale”.
- As-is, this CSS expression is very resource-intensive, so…
- USe
this.runtimeStyle.behavior="none"
to ensure the function is executed only once.
JavaScript Method
There are several JavaScript techniques for applying the AlphaImageLoader
transparency filter to target PNGs. One of the more popular methods is the [SuperSleight method]. SuperSleight solves many of the problems typically associated with previously discussed methods:
- Valid CSS — requires no special CSS.
- Unobtrusive functionality — exclusively targets deficient versions of IE.
- Improved performance — the function can be executed throughout the entire document or only in specified page regions.
- Clickable links, focusable forms — optional automatic application of
position:
relative
to links and form fields.
- Automatic sizing method — detects background images set to
no-repeat
and sets the scaleMode
to crop
rather than scale
.
- Applied to new content — automatically applied to any newly added content, such as that loaded via Ajax requests.
- Replaces previous versions — works with both inline and background images, replacing the need for both sleight and bgsleight.
- Web Standards — complete separation of structure, presentation, and behavior.
The downside to this method is that JavaScript must be available in order for it to work. Other than that, the technique is nearly perfect, addressing nearly all of the shortcomings of previous methods. To use this method, [download the Supersleight script] and a [transparent GIF], upload the files to your server, and include the function via [conditional comment]:
<!--[if lte IE 6]>
<script type="text/javascript" src="http://domain.tld/path/supersleight.js"></script>
<![endif]-->
…and that’s all there is to it. No need to mess with class names, alternate images, or specific attributes. Supersleight does all the work by traversing the DOM and applying the required filters via pattern matching. Completely unobtrusive and awesome.
Hope this article helps everyone properly.