IE6 PNG Hack/Fix

HTML & CSS
1

Hi Guys,

Was just wondering what would be the best fix for PNG in IE6, I know theres several way to do it but am just wondering what would you guys suggest be most effective way and if you could provide an example on how to implement it on this site I’m working on that would be great, heres the link, notice the MAKE A DONATION button is a PNG.

http://mikenificent.com/veteransinc/

Thanks,

Mike

2

Take a look at DD_belatedPNG.
Examples of how to use it are included on the website (in the usage section).

I like this solution best because it had less limitations than other solutions.

3

Thanks for this, do you know if there are any easy CSS tricks for solutions rather than javascript?

4

Did you try to find a solution yourself? The web is loaded with solutions to this problem. We’re not here to google solutions for you, you’re supposed to be able to that yourself (unless you live in China, then you should use Baidu ;))

Anyhow, take a look at this article.

5

You could link to a behavior file with CSS although that isn’t really the best option (nor is it better then using JS)

Are you apposed to using JS for this for some reason?

6

i.e., TwinHelix IE PNG FIX.

7

Thanks ScallioXTX I used the javascript from your first post. Unfortunately I’m on a Mac and my PC only has IE 7. Is there a site where I can test my websites to see them in IE6? If not, could someone please review the site using the hack supplied by ScallioXTX and just see if the PNG is showing up correctly as I may not have implemented it correctly.

http://mikenificent.com/veteransinc/

Thanks,

Mike

8

could someone please review the site using the hack supplied by ScallioXTX and just see if the PNG is showing up correctly

It’s not working for me.

9

Yes that’s the ideal one I tend to recomend :). I had a custom one made a year ago by a member here…worked quite well :slight_smile:

10

The JS file which you are directing the Javascript to has returned a 404

http://mikenificent.com/veteransinc/DD_belatedPNG.js

11

If you only want the odd image transparent and don’t need background properties then you can just use the filter natively on an image by image basis without javascript as shown in the Sitepoint reference.

Don’t apply the filter to positioned elements that need ot ne clicked as they will become unclickable. Position the element first and then apply an inner non positioned element to hold the transparent image.

If you have lots of images then the methods mentioned above are best as they automate the process to some degree.

Wherever possible I will try to avoid having to use the filter or javascript and will instead use 8bit transparent pngs for IE6 (which it understands) and 32bit pngs for everyone else. Ie6 gets the lesser quality pngs which in a lot of cases don’t look too bad but if there are a lot of shadows and transparency effects then the image doesn’t look too hot.