Force PNG Support in IE6

[Jim7283]

Hi All,

Does anyone know if there is a way to force PNG support in IE6, or if there is some JS workaround that will get the browser to recognize the transparency in images? I'm going to search online for a solution as well, but perhaps some of you know if this is possible?

[Jim7283]

This script appears to be what I want, but thus far I have been unable to get it to render my semi-transparent PNG backgrounds correctly...

http://www.twinhelix.com/css/iepngfix/

Anyone know of other ways around this?

[Jim7283]

Again, a decent reference for handling this, but still won't work to get my backgrounds transparent:

http://24ways.org/2007/supersleight-transparent-png-in-ie6p

Hmmm...

[coothead]

Hi there Jim7283,

can we have a link to your .png image for testing purposes?

[RysChwith]

The problem you're going to encounter is that the only available fix requires a div, which makes it useless for background images. However, you can use CSS positioning to make a div appear as a background without actually being a background image. That may be your only option.

Rys

[Jim7283]

Sure coot - it's for the new version my own site:

http://www.doyledesigninc.com

Basically I want the soundwave background image to be partially visible through the content div (ala Vista), thus the need for a semi-transparent image. As it stands now I'm pretty happy with the PNGs, but not happy that IE6 is unable to cooperate since nearly 30% of internet users are still running this browser.

To your point Rys, I may just end up using some Photoshop skills + nested <div>'s to recreate the effect. I should able to create a <div id="contentwrap"> with a JPG background that matches the body background image, and will be fixed at the top of the div. Then use another <div id="content"> inside the wrap, which will contain a repeating JPG that replicates the look of semi-transparent white over black, which would allow the <div> to stretch vertically without any layout issues.

Ideally, I would love to find a workaround that doesn't require added <div>'s and extra JPGs, but accessibility is #1 so if I cant find a way to force IE6 to render the PNGs properly then I'll just have to do the latter.

Stupid IE6

[coothead]

Hi there Jim7283,

I have looked at your problem and think that I may have found a satisfactory solution. :agree:
Instead of your contentbg.png I have used opacity for the effect.

The basic ideas may be found in the attachment.

[Jim7283]

That's excellent coothead - thank you! It looks like depending on the security level the user has set on their browser IE6 may require them to click 'OK' on the information bar, but this is a lot better than just defaulting to white. I'll be implementing this - great call!

[coothead]

Hi there Jim7283,
no problem, you're welcome. :agree:
There is just one small point that I should mention, though.
I see that I have used margin to position the webstats.png image in my example.
You may need to use left and top instead when you come to add the other absolute items to the container div.

[Jim7283]

Hopefully I will get a chance to implement this today and will report back with the final CSS!

[dylanb]

Have you tried ie7 or ie8 javascript files available here;

http://code.google.com/p/ie7-js/

This makes IE 5-6 behave like IE7 in many ways including transparent png support, it does have a few limitations, like not being able to tile them, but it should do what you need with little effort

[Jim7283]

Wow - I had NEVER heard of this before, but it sounds great - I'll definitely check it out, thanks!

[Jim7283]

Dylanb - that script is excellent, and did exactly what I needed it to do. However, on my IE6, it seems that this JS file has caused my forms to stop working and links to not be clickable - very strange!!!

Can you take a look at this page and let me know if you are able to fill out the form fields using IE6?

http://www.doyledesigninc.com/contact/

[dylanb]

Hi, I'd start by working on some of the validation errors;

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.doyledesigninc.com%2Fcontact%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&verbose=1&st=1

I dont have IE6 right now to check but I think you made need to change your links from href="home" to href="/home". also your ommouseover form elements are causing problems, i'd do this with css instead by adding :hover styles

[Jim7283]

Those errors are all related to the Flash embedding and are not really my concern at this point. My main concern is that since implementing the Google IE fix CSS all my page links and form fields are not working in IE6, which I believe has something to do with the fact that they are set on a <div> with a PNG background - I'll search Google for some answers and see if I can pinpoint the cause...