IE6 and Transparent PNGs
Background: Internet Explorer 6 does not properly render images that have PNG Alpha Transparency. Due to this bug, Ie6 displays images that have alpha transparency (i.e saved as 24-bit PNG) as if they have solid grayish background.
Workarounds: There are different situations where you have to use different techniques to force IE6 into rendering PNG images properly. Follow this link to look at the working example.
Non-repeating and not background images.
In this case, I normally use ie6png.htc fix. In my example there is an image of a leaf that employs that technique:
HTML:
img src="images/decor.png" height="133" width="156" class="trans"
As you can see, that image has a specific class assigned to it (you can generally reuse that class for all nonbackground and not repeated images on your site). If you take a look at the source of the document (right click > View Source), you will notice the following in the conditional statement (that will only be implemented for IE6 browser):
CSS:
.trans { behavior:url("iepngfix.htc"); }
Important: You must specify the dimensions (width and height) of the image.
Non-repeating background images
For the transparent background images I use IE’s proprietary tag - filter. In my example two images will fall under this category - background-top.png and background-bottom.png (top and bottom rounded corners).
In the conditional statement you will find the following:
CSS:
#container {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-top.png',sizingMethod='crop'); background:none;}
and
#container {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-bottom.png',sizingMethod='crop'); background:none;}
Important: Note that sizingMethod is set to crop.
Repeating background images
That’s right, you can get those transparent png background images to repeat but only in one direction (i.e. either repeat-x or repeat-y). Here is how:
In the conditional statement you will find the following:
CSS:
#container #main { width: 453px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background-repeated.png',sizingMethod='scale'); background:none;}
Important: You have to specify width of the element that contains that repeated background image (otherwise it will not work).
Important: Note that sizingMethod is set to scale.
Your might run into a problem, where links are not clickable in IE6, in that case you will need to specify z-index for those links.
#container #footer a, #container #footer a:visited { position:relative; z-index:2;}
That was my collection of little tricks that I utilize all the time when dealing with IE6 PNG Transparencies.
Your listing of png fixes for IE6 is probably the best I found on the net. Great work.
Comment by Matthew — June 13, 2008 @ 10:30 am
Thanks, Matthew!
Comment by anna — June 13, 2008 @ 5:54 pm
When using the code for non-repeated background imgaes in the CSS, I ran into a problem with my images being clipped.
http://www.tailored.previsuals.com/test.html
The images are placed so they are protruding from the divs and it seems as though the area outside the divs are being clipped.
Do you have any thoughts or suggestions?
I also have used this code to create the transparency and the same effect takes place, btw.
azimuth: expression(
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=”images/blank.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=’scale’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true
);
Comment by Thomas — July 1, 2008 @ 1:34 pm
I took out the code above out of the css and I used your method of placing the conditional comments in the header, but yet my images are still cut off.
Help?
Comment by Thomas — July 2, 2008 @ 7:59 am
Thomas, this does not seem to be a png transparency issue, but a positioning one. You have a whole lot of unnecessary absolutely positioned elements in your layout. Here is a very good tutorial on how to layout a page without using so many absolutes - CSS Layout from scratch. Hope this helps.
Comment by anna — July 2, 2008 @ 2:28 pm
I’m running into the issue where I’m using PNG background images in image replacement. The image displays properly in IE6, but the cursor does not turn to clickable hand on mouseover. Any ideas?
Comment by sbf — July 4, 2008 @ 2:53 pm
Yes, I’ve had that happen before. Basically, when alpha filter is applied, it assigns the highest z-index to that background image on a page, and in turn disables any kind of click events for the elements underneath.
A simplest way to fix it is to add position:relative to all the links (and z-index as well if necessary).
Check this link out for the in-depth explanation of this issue.
Comment by anna — July 4, 2008 @ 3:13 pm