I have been trying to resolve an issue with PNG files and transparency in IE browsers on my website. I have made progress, but there seems to be a problem specifically with IE6.
To display transparent PNG images correctly on my site in IE browsers, I am using unitpngfix.js. Here is an example of how I have structured a DIV with a PNG image inside it:
<div id="pop" class="pop_komm">
<img src="Graphics/komm.png">
</div>
My CSS for this element is as follows:
.pop_komm {
position: absolute;
z-index: 20;
height: 52px;
width: 208px;
left: 760px;
top: 239px;
display:none;
zoom:1;
}
In order to make the container visible, I am using a basic JavaScript code snippet:
document.getElementById("pop").style.display='block';
//This function triggers when a drop-down list value is changed
Unfortunately, this does not seem to work in IE6. The content does not show up at all. Interestingly, if I completely remove the unitPngFix script, the DIV displays along with the PNG image, but transparency is lost.
Furthermore, if I hide the DIV instead of showing it using:
display='none';
Then everything works fine! It seems that when the DIV is hidden, the unitPngFix interferes with displaying the PNG file. Could this be a bug?
Any suggestions or assistance would be greatly appreciated.
You can visit the UnitPngFix website for more information.
Thank you
P.S.: I may consider using jQuery to address this issue, although I prefer to stick with plain JavaScript since that's what the current website is built on.