IE6 Transparent PNG's

There are many, many tutorials on the net that explain how to get round the transparent png issue with IE6. However, none of them are geared towards absolute beginners (like me).

Does anyone know of a good walkthrough that explains how to combat the transparent png issue on a Zen Cart site? What files to edit, where to put the code etc., etc??

I have used the pngunit fix to make 24bit pngs with alpha work on ie6. It's pretty easy. Give me a few and I'll dig up what you need to do and post again.

OK, go here:
http://labs.unitinteractive.com/unitpngfix.php

and download the script.
Put it somewhere on your site.

Then to your html_header.php add:

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Make sure the above is NOT between any php tags.

change the src= to the path to where you uploaded the script.

Thats it!

This is the best solution I've found so far.

The only drawback is if you use a 24 bit png as a background in a element, it may or may not do what you expect. But for displaying them with the img tag, It's pretty perfect.

I gave up on Transparent PNG's and converted them to Transparent GIF's not as nice but enough to get by with.

Skip

Oh yea, There is also a tiny 1 pixel transparent graphic you upload as well (its in the zip)

skipwater:

I gave up on Transparent PNG's and converted them to Transparent GIF's not as nice but enough to get by with.

Skip

You should try this skipwater, it works very well.

I might do that on the next site.
Thanks for the info.

Skip

OK, let's try and get to the bottom of this then as it simply doesn't work for me. Here is the step by step I've tried:

(1) Uploaded the clear.gif to my root folder at https://www.limelites.co.uk
(2) Uploaded the unitpngfix.js to my root folder too
(3) Added the code to /includes/templates/CUSTOM/common/html_header.php

added this at the very bottom just above the closing </head> tag:

That should be it right? Well, I'm using PNG24 images on certain areas of Limelites and they still don't show transparent on IE6. Where am I going wrong?

I don't want to use .gif's as they look awful and ragged edged.

OK FIGURED IT OUT!!

Here's the step by step in detail:

(1) Upload the clear.gif to your root folder at https://www.YOURSITE.com

(2) Edit unitpngfix.js and:

replace:

var clear="images/clear.gif"; //path to clear.gif

with:

var clear="https://www.YOURSITE.com/clear.gif";

(3) Upload the unitpngfix.js to your root folder at https://www.YOURSITE.com

(4) Add this code to /includes/templates/CUSTOM/common/html_header.php

(add it at the very bottom just above the closing </head> tag):

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

That's it!! It definitely works. Tried and tested. I'm using PNG24's though. Not sure if it'll work with PNG8's