Loading...
November 12, 2007Rogie’s CSS PNG Fix for IE6
UPDATE: View this Updated post for a full coverage of IE6 and Tranparent PNGs Issues
Update: A working example can be found here – IE6 PNG fix
Rogie over at komodomedia wrote an excellent article explaining in details how to make sure that IE6 displays transparent png images correctly. I have scanned over the comments and saw that somebody asked whether that technique worked with repeated background images, which it wasn’t.
So I have looked over that useful little snippet
#container {
width:780px; margin:15px auto 0 auto;
background:url(images/bck-content.png) repeat-y top left;
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='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
);
}
and saw that if I change crop to scale,
#container {
width:780px; margin:15px auto 0 auto;
background:url(images/bck-content.png) repeat-y top left;
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
);
}
the repeated background images would actually start displaying properly.
Here are some screenshots of what I am talking about.
repeated background image in IE6 without png fix
repeated background image in IE6 with png fix and crop setting
and Lo and Behold – repeated background image in IE6 with png fix and scale setting
This does not work in my example.
Do you an example page to look?
Comment by mupo — November 21, 2007 @ 12:46 pm
I’m trying for 3 hours now and can’t get it to work.
After every little modification I clear IE cache and refresh the page, sometimes it goes right, but the next refresh ruins it. When i placed all the files (index.php, style.css, iepngfix.htc, big background file with horizontal gradient, 1px high small background with transparent edges, blank.gif) in the same directory then it worked…it seemed to work, but as I opened it on another computer it was all blue again. Refreshing on my machine also resulted blue lines on both sides of the main block where the gradient should be.
Help please. Thanks!
Comment by novak — November 22, 2007 @ 5:01 pm
Hello Novak and Mupo,
I have created an example for this workaround. Please take a look. In my setup I have index.php, style.css and iepngfix.htc in the root of the folder; and background images (one transparent and another one gradiented) and blank.gif in the images folder – http://veanndesign.com/iepng/images/
Working example can be found here – http://veanndesign.com/iepng/index.php and stylesheet is here – http://veanndesign.com/iepng/style.css
Hope this helps,
Anna
Comment by anna — November 22, 2007 @ 5:25 pm
Hello anna, thanx a lot for the example! That helps me very much to understand.
Greetings mupo
Comment by mupo — November 23, 2007 @ 3:18 am
Hi, I have used this code and it works fine for repeated png background. But the problem is that inside that container I am unable to add an anchor tag. So please fix it if you can.
Thanks & Regards
Manoj
Comment by Manoj — January 9, 2008 @ 7:14 am
manoj: you put in your anchors style=”position:relative” and it´s done
Comment by Jose Maria Peirano — January 16, 2008 @ 12:53 pm
Manoj: Jose’s suggestion should work… What you might also try along with the position:relative is style=”z-index:100″. That will ensure that your anchor/link is on top of the stack level. Read more about the z-index here
Comment by anna — January 16, 2008 @ 9:17 pm
hi,its a good solution for png fix,but the anchor tag are not clickable ,i tried the position relatice and z-index soluiton but its not working,plz help,its urgent
thks
prreya
Comment by prreya — January 25, 2008 @ 8:02 am
thanks you are awesome!
ps. do u think you should use one image for the submit button and change background position on hover?
Comment by Matthew — February 1, 2008 @ 9:35 pm
Very useful information.
Comment by estetik — March 5, 2008 @ 10:38 am
Thank you thank you thank you! Worked perfectly!!
Comment by Jess — March 5, 2008 @ 6:41 pm
Wow, man you rule! Save me a lot of headaches!
Comment by Zilus — April 3, 2008 @ 2:56 pm
Great stuff man! For others, I had a nightmare 2 hours until i put ‘width:..’ and it worked extra super kicked a$s
Bravo!
Comment by skobaljic — June 14, 2008 @ 9:21 am
Great! I am happy it worked out for you.
Comment by anna — June 14, 2008 @ 2:28 pm
Does’nt work with IE 5.5 or below ..
Need something where PNGs work with IE 5.5 too … 5.0 and below does’nt matter ..
Comment by Jones — June 18, 2008 @ 4:08 am
Yep, I was sort of suspecting it (I don’t have IE5.5, so there is no way for me to really test it). I have found this though – PNG Alpha Channel Fix for IE5.5 see if it helps.
Comment by anna — June 18, 2008 @ 10:04 pm
Heyh, It seems to do the trick in IE for me with css background and repeat x… though my “background-position: bottom left;” seems not to work now… any fix for that?
-ThanX
Comment by Thomas — July 10, 2008 @ 9:18 am
hello. thanks for the code. it works great for IE6. one issue i came across though, is that now, the background image doesn’t appear in firefox…
is this only happening to me? can anyone shed some light on what’s happening…
thanks again.
a.
Comment by Mambo — July 28, 2008 @ 8:57 am
nice stuff but its not tiled at all, its stretching the png, i tried all repeat methods in css and not working. its like when u just write ’scale’ in the sizingmethod. :\
Comment by Reset — July 29, 2008 @ 2:49 pm
Thank you very much! It works great in IE6!
Comment by texman — July 30, 2008 @ 4:16 pm
I can’t get it to work either ..
But i have found another way to get PNG to work in IE 6 AND IE 5.5:
- Use the a behavior on the ’s:
This will change ’s source to a transparent gif, and set the alphaload filter with the original source. This will work in most common browsers (IE 5.5, IE 6, IE 7, Mozilla Firefox, Opera, Safari) – so my guess is that it’ll work in other browsers as well ..
- For backgrounds from CSS use a CSS-hack ..
.class
{
filter: alphaloader with crop or scale depending on the way you want to use it
}
*|html .class
{
background-image + other settigs
}
and finally – the links that won’t work – put as said position relative on them – and what text you might want (if the user want to copy any text – this might get in handy)
Comment by Jones — July 31, 2008 @ 1:38 am
Yes I have written an updated post about it – you can find it here .
Comment by anna — July 31, 2008 @ 6:50 am
This doesnt seem to work for tiled background, The example shows the image tiled on the Y axis?.. lol… thats just stretched…
This solution would really be awesome if it showed and example with a truly tiled background.
Comment by Technoid — August 3, 2008 @ 12:09 am
There is no way to truly tile transparent backgrounds in IE6 (at least I haven’t seen one pngfix solution that would address this problem). It works for repeat-x or repeat-y only.
Comment by anna — August 4, 2008 @ 4:06 pm
Simply nice, I became a big fan of this blog by finding the solution of png in css.
Live Long VeannDesign
Thanks,
Naseeb Fatima
Comment by Naseeb Fatima — April 22, 2009 @ 11:12 pm
Simply nice, I became a big fan of this blog by finding the solution of png in css.
Live Long VeannDesign
Thanks,
Naseeb
Comment by Naseeb Fatima — April 22, 2009 @ 11:12 pm
Thanks a lot! it helps me lot to solved my png issue.
Thanks! once again
NandaYKS…
Comment by nandayks — July 21, 2009 @ 5:57 am
Thanks a Lot! I’m solved my problem at point of nick. Thank you
Comment by Soubhagya — October 21, 2009 @ 12:02 pm
Thanks!!! It saves my life!!! Keep up the good work!!!
Comment by Mjc — July 28, 2010 @ 1:09 am