I’ve been working with Pngs over the last few weeks because they just look so much dang better. But then I went to setup IE6 support and some of my quick-hacks I used. If you’re not aware, to use transparent pngs in IE6 you need to set them as the background of say a <div> or <span> and then apply a filter to it. If we were to apply it in css it would look like this:
.myPng{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='/images/mysweet.png');
}
However, to use only css to do this we _need_ to know the height and width of the image, because the filter actually just sets the background image. There’s a few other png hacks out there but none that really worked for me for various reasons. What I needed was something that was fast, lightweight, easy to read, and I could call it if I was building an <img> tag in javascript. So I made this:
Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='"+ img.src +"')"
} else {
img.style.visibility = "visible"
}
}
}
The only catch is that this relies on three things:
1. The <img> tag must have style=”visibility:hidden”
2. There must be a <div> tag wrapping the <img> tag. (the <div> tag can have styling)
3. The FixPng is called at some point passing the <img> tag object
So a normal fix would look like this:
<div><img src="/images/mysweet.png" style="visibility:hidden;" OnLoad="Global.FixPng( this );" /></div>
That’s about it. I don’t think this is my last iteration of this fix, but it works 100% better for me since I can easily use this in html and in javascript. I hope it helps you.
note: I’ve heard that the <img> OnLoad doesn’t always fire in IE6 because of caching. There’s workarounds, but if you have any insight, please post.
#1 by Clasificado on May 11th, 2007 - 2:46 pm
¡Hey! ¡Good script!
The only place where i can make an observation is the use of document.all to catch an IE.
#2 by Soyer on November 2nd, 2007 - 8:55 pm
Doesn’t work for me. The PNG disappears from view in all browsers. I replicated your steps exactly.
#3 by suraj naik on November 16th, 2007 - 3:02 am
Hey what about the PNG images coming through css..is there any fix..this fix is not useful though as most of the background effects comes through css only
#4 by slashas on December 20th, 2007 - 11:03 am
Interesting fix, I’ll try it
#5 by Shaolin on January 29th, 2008 - 8:29 am
When i copied the Global object-code it came with “ insted of ” and ’ insted of ‘ etc etc.
Result=error.
Heres the code with right types of quotes (I hope):
Global = {
FixPng: function( img ){
if(document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’”+ img.src +”‘)”
} else {
img.style.visibility = “visible”
}
}
}
#6 by Shaolin on January 29th, 2008 - 8:31 am
Ignore my previous
I guess your replacing ‘ and ” to remove sql-inj or whatnot.
But you should inform viewers of this, anyone not very good at js will bugg his brain out.
#7 by Diogo on February 1st, 2008 - 11:28 am
Tnks… this is the best and the small solution!
#8 by Sandeep Parashar on February 28th, 2008 - 3:47 am
great globlay png fix solution, but it works only in font images can any css background globlay solution
#9 by Nasir Altaf on May 20th, 2008 - 3:11 am
BEST FIX…I’ve been looking for one for ages, had a lot of trouble implementing other fixes. This is great, nice one
#10 by forapathy on September 18th, 2008 - 12:47 am
the mouse hand in ie6 doesn’t show
#11 by Claudiu on September 23rd, 2008 - 9:23 am
Doesn’t work. I have a rollover image button formed out of two .pngs and they disappear on IE 7.
#12 by revoked on September 23rd, 2008 - 9:41 am
@Claudiu
I’ve found that it’s much easier to just handle the roll-overs in a stylesheet. Giving the element a class or id then switching the filter for it on :hover. Instead of using javascript to auto-replace the background with a filter. I hope that helps.
#13 by Hung Doan on October 7th, 2008 - 7:51 pm
Thanks so much, it’s very wonderfull
#14 by Farshid on November 13th, 2008 - 2:06 am
Thanks, this is great.
I had problem with links on hover… using this solution I was able to make it work:
#topmodulestable .topmodulestd .generalbtn a, #content3coltable .content3coltd .generalbtn a, #botmodulestable .botmodulestd .generalbtn a{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’img/btn_bg.png’);
cursor:pointer;
}
#topmodulestable .topmodulestd .generalbtn a:hover, #content3coltable .content3coltd .generalbtn a:hover, #botmodulestable .botmodulestd .generalbtn a:hover{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’img/btn_over_bg.png’);
cursor:pointer;
}
I added “cursor:pointer;” to the style as it seems to be needed for the pointer mouse icon.
#15 by vinitha on February 5th, 2009 - 4:16 am
Hi,
I am facing a wierd problem with IE6. The issue is as follows.
I have many div tags in my web page (popup). One of the div has a table with 3 rows. The 1st row has a label, 2nd row has data that the user can provide (something like editor control) and the 3rd row has link. when the user enters large data in the editor control and save it its getting saved and everything is perfectly fine. The problem comes when the user opens the web page. The UI is scattered because the 2nd row exceeds and the div tag gets expanded and hides the link button. This issue is only in IE6.
Can you please help me or direct me so that i can resolve it?
Thanks in advance.
#16 by Ariel P on February 18th, 2009 - 7:27 am
To not have the cache problem, i adapted the script to this:
function ie6PngFix(arr) {
for (var i = 0; i < arr.length; i++) {
img = document.getElementById(arr[i]);
if (document.all){
img.parentNode.style.width = img.offsetWidth;
img.parentNode.style.height = img.offsetHeight;
img.parentNode.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src=’” + img.src + “‘)”
} else {
img.style.visibility = ‘visible’;
}
}
}
#17 by Ariel P on February 18th, 2009 - 7:28 am
and the onload in the body
onload=”ie6PngFix(Array(’logo’));”