August 26, 2008
Came across an update of the IE6 PNG fix at Unit Interactive.
This code is simple to integrate, works like a charm and very quick!
To get started you need the unitpngfix.js.
Add the following code into the head of your document. Change the folder structure to your desired path.
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
On running this I ran into a couple of problems…
1 - My images had the missing image graphic over the top
2 - Links on images made some images disappear
3 - Disappearing Divs!
Looking into these problems I came up with a few solutions.
1 - Missing graphic overlaying image
For the missing images graphic over the top of my transparent image was a problem with the updated unitpngfix.js, the update stated on 08.26.08 where there was no need for the clear.gif any more didn't quite work on my IE6 browser. I changed the unitpngfix.js to have the following:
el.src="/media/images/clear.gif";Instead of:
el.src="javascript:'#define x_width 1\\n#define x_height 1\\nstatic char x_bits[]={0x00}'";This cleared up the missing graphic over the top of my transparent images. The clear.gif is a simple 1px x 1px blank gif sat in my images folder.
I get the missing graphic icon on their website using IE6 too! Please fix this unit interactive!!
2 - Disappearing images when using links
The next issue being links on my png images, this worked on some but not others. I solved this by adding:
img { display:block; }The only problem with this is that you may not want all your images to be displayed like this…
3 - Disappearing div's
For the disappearing div's was an odd one. My webpage was setup with a footer div that had no css styling just normal text and an image inside. The div wouldn't display! Removing the javascript displayed the div… tad confused!
Playing with this I managed to get the div back by using:
#selector { display:block; position:relative; height:50px; }The div almost acted similar to a floated object, by putting a height on this forced it to display.
Hope all this helps 
