Question

I have almost solved a huge problem with png files and transparency in IE browsers on my website.

The problem is that only in IE6, this wont work.

I have this code called unitpngfix.js which displays transparent PNG images correctly on my website in IE browsers.

I have a DIV with a png image inside it like this:

<div id="pop" class="pop_komm">
<img src="Graphics/komm.png">
</div>

css:

.pop_komm {
position: absolute;
z-index: 20;
height: 52px;
width: 208px;
left: 760px;
top: 239px;
display:none;
zoom:1;
 }

And I have a very basic js code for making the container visible:

 document.getElementById("pop").style.display='block';
 //This triggers on a drop list change event, so this DIV shows when I change a drop list value

This wont work however. Nothing shows up in IE6. If I remove the unitPngFix completely, then the DIV shows with the PNG file, but the transparency wont work.

Also, if I reverse the js function and “HIDE” the DIV instead of showing it:

    display='none';

Then it works fine!
In other words, when the DIV is hidden, then the unitPngFix prevents the PNG file to be shown. I am suspecting a bug here!?

Any help?

Here is UnitPngFix website

Thanks

PS: I will tag JQuery also, as I might have to use it to fix this, but I would prefer plain js as the website is currently only built using that.

Answer 1

Instead of hiding it, set a huge left offset and the PNG fix should apply. Then to show it, set the left to a visible legit value.

left:-9999em then to show it, left:760px