No public Twitter messages. 
Loading...
March 9, 2008IE6 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
On elements that won’t change throughout, I’ll use absolute positioning. Thanks for your advice though.
Comment by Thomas — July 8, 2008 @ 7:09 am
On elements that won’t change throughout, I’ll use absolute positioning. So tell me, why would an absolute positioning effect PNG transparency? BTW, the elements that are being clipped aren’t absolutely positioned (except Flash but thats a placeholder for Flash and won’t need transparency)?
Comment by Thomas — July 8, 2008 @ 7:16 am
And z-index doesn’t work with floated items, either.
Comment by Thomas — July 8, 2008 @ 7:21 am
Here check this out. Those out of box images are displaying properly now in IE6. Hope this helps.
Comment by anna — July 8, 2008 @ 1:12 pm
Thanks alot! Yours is the most comprehensive and easily implemented fix I’ve found thus far.
The repeating background issue was a big fix. Thanks again
Comment by Justin B — July 14, 2008 @ 8:19 am
So far, I haven’t been able to find a solution for the background-position problem.
Comment by anna — July 31, 2008 @ 6:52 am
Thanks is cool!! i ask you, i can´t “backgruond-position: left bottom”, pleas help me.
Thanks very much
Comment by Michael — September 10, 2008 @ 5:31 am
Michael, it appears that you have misspelled background-position… please try the following: “background-position:left bottom;”
Let me know how that goes
Comment by anna — September 13, 2008 @ 9:12 pm
Regarding “Repeating background images” and “non-Repeating background images”
We have been using this approach until recently when it seems that a MS security fix for GDI+ (KB938464) caused IE6 to go into a long loop. Using the first approach for non-repeating background images (HTC file etc) solved this problem.
I have checked this by removing update and all work as it did orginally
Hope this helps
Ian
Comment by Ian — September 24, 2008 @ 9:27 am
Wow, Thanks for posting this. It really sucks though (fix one thing – break another). How unfortunate.
Comment by anna — September 24, 2008 @ 8:18 pm