I'm working on a new site where I'm trying to do some things with semi-transparent images. Everything's fine until I check it out in Internet Explorer 6, which 30% of the browsing public is using for some reason. Various hacks and techniques are available to trick IE6 into displaying png's properly. Here's the thing...I just tested a half a dozen of them and none of them appear to have any effect at all. What the heck? I checked the IE settings to see if there was a box for "display anything transparent as opaque gray no matter what," but there did not seem to be one.

Maybe next month when the new Firefox comes out, Oprah will talk about it and then everyone will stop using IE6. That would be sweet.

In the event that doesn't happen, though, I'm totally interested if anyone's got any suggestions.

I.

Did you try this?
http://www.alistapart.com/stories/pngopacity/

If so I'm stumped. Can I see the page you're working with (or the code and image at least) so I can play with it, if nobody else has the answer?

Here's an example of what I'm talking about...this page is supposed to demonstrate how to make it work:
http://www.twinhelix.com/css/iepngfix/demo/
...but on my IE6, that doesn't look right at all...the first png is solid blue with a solid blue background, and the second is invisible. (With firefox, they both look fine.)

As for that article, I checked it out, but those 83 lines of code there are too much for me...I'm not a javascript programmer. I'm not quite sure what to do with all that.

Works perfectly in my IE6
The problem with any of these fixes for IE and PNG transparency is that they will NOT work if the png is repeating. As long as the PNG is a non-repeating element, any of these fixes do work, I've used 2 different ones - the one at Twinhelix and 1 other.

Maybe if you use more universal methods

...such as .jpg or .gif, I'll never, ever be able to change a background color without redoing every single graphic. With .png, I have complete flexibility. Cruddy, pixelated edges are not acceptable.

Works perfectly in my IE6

OK, this is really starting to bother me. If that page renders properly on your IE6 and not mine, there must be something different about my browser. Some sort of setting?

I.

Possibly, or it could be that you're missing an update ? Check your settings for scripting, I'd start there since it is a script that forces IE to do the transparency.

Checked on updates, and Windows just tried to get me to update to IE7. Didn't seen any version 6 updates. Checked on settings...Tools > Internet Options > Security > Custom Level has got a number of buttons regarding scripting, all of which I enabled. That demo page still renders incorrectly on my computer.

Until I switch to Firefox, and then my png problems disappear. I can't believe 30% of the public is still using that piece of junk. I suppose it's the "it came with my computer and I'm not messing with it" crowd.

I'm still all ears if anyone's got anything to contribute regarding this png weirdness.

I.

I have used the twinhelix solution before and it worked for me. You shouldn't have to mess with any code on that one. You just upload the "blank.gif" file and the "iepngfix.htc" file into the same folder as your web page (the one you are using a transparent png in). Then you add this to your css:

img, div { behavior: url(iepngfix.htc) }

If your IE6 isn't showing the example page correctly, I am baffled. I don't know why it wouldn't show it right. If i were you, I would try the twinhelix solution again and have a friend check it out for you on their computer. One of us here would probably even check it for you. You can also check it (well kind of) here: http://ipinfo.info/netrenderer/

And unfortunately, no solution I have found will work on repeating backgrounds in IE6. Maybe we should all write a letter to Oprah??

Yeah, it's really weird that my IE6 isn't behaving like other IE6's. My worry is this: how many other users have an IE6 that misbehaves like mine?

I tried viewing that demo with the netrenderer you suggested to see what that looked like, but the darn thing only shows the top part of the page. Looks like a good tool, though.

Arrgh!

I.

Originally Posted by ibexslam

I tried viewing that demo with the netrenderer you suggested to see what that looked like, but the darn thing only shows the top part of the page. Looks like a good tool, though.

Arrgh!

I.

blah, I was afraid of that. That's why I put "(well kind of)" to qualify my suggestion lol! I was hoping you could see enough of it in the netrenderer, but I was wrong. It is a helpful tool, but I haven't been able to find a way to view more than the top half of a page.

Another approach to the PNG transparency issue is the method of using the 8 bit PNG but combined with full alpha transparency rather then the gif-like 1 bit paletted channel.
You can use Adobe Fireworks to prepare such image - unfortunately other graphic packages don't offer this feature. If you don't have Fireworks - you can use PNGQuant to convert the 32 bit PNGs, however the resulting image will be either bigger in size, or of the worse quality.
Check the comparison: http://jedisthlm.com/testarea/pnq-quant-vs-firefox/

And the result of this method is an 8-bit PNG which is beautifully displayed in all the modern browsers, while in IE6 it will be stripped of the transparent part - which is already much better than what IE6 does with the 32-bit PNGs (replacing the transparent part with an awful gray background). Again - check http://jedisthlm.com/testarea/pnq-quant-vs-firefox/ in your IE6 to see the difference.

The biggest advantage of this method is that it does not require any additional coding and the "harm" for IE6 users is not too severe.

Yes, I looked into the 8-bit png's, and I'm using them to solve one of my problems. My page has got a very faint, very transparent graphic that's overlaid on the background. With a regular png, of course, that all turns light gray. I've substituted an 8-bit, and it just disappears on IE6, which is fine.

However, in the header I've got what you could call a typographic logo over a colored background, which I'd like to be slightly transparent (the logo, that is), which would disappear in IE6 if it were a png8.

I suppose I could give up the slight transparency of the logo, and use a png8 there...the thing is, as png8's in IE6 show only fully-opaque pixels, the anti-aliased edges would disappear. In that event, the logo would still be legible, but ugly around the edges. That won't do.

To heck with all this code nonsense. I'm just going to use a single big jpeg for the whole page. (I kid.)

Originally Posted by ibexslam

To heck with all this code nonsense. I'm just going to use a single big jpeg for the whole page. (I kid.)

I think you should at least split the jpeg into two