I haven't used transparency in images much before, but does IE 6 always have trouble with PNG transparency?

How can I solve this issue?

  • At the moment Answer doesn't seem to work, here on doctype. Marcel about 7 years ago
  • Since I can't post this as an answer... yes, ie6 has never been able to display alpha transparency. There are several hacks and workarounds, but the one i found works best and with the least bugs is [DD_belatedPNG: Medicine for your IE6/PNG headache!][1] kemie about 7 years ago
  • Yes, IE6 never supports transparency in PNG You have different ways to solve this: 1. The cleaner way is, that i suggest is, replace in a IE specific Stylesheet the PNG with Gifs. 2. The other way is to use one of those javascript solutions like UnitPNG or IEPNGfix.htc, which have sever limitations, like no repeat support and only possible on static elements. But think about it, i think your Layout could be made without PNG Transparency. Just by using jpg and slice them at the right places, then some CSS tweaking. you might have a look at [http://swissfs.ch][1] as a reference. I also have degradation in the background and sliced the layout to match with it. [1]: http://swissfs.ch Marcel about 7 years ago
  • You need a common tool to fix the problem. Search for **"png fix"** and find explanation and how to fix. DrFalk3n about 7 years ago

6 answers

3
points

IE up to version 6 does not have support for PNG transparency. You'll have to use supporting fixes for IE6.

There are generally three popular solutions out there:

  • Using MSIE specific CSS/JavaScript filters. Google: "IE6 png filter".
  • Swapping the PNG24:s to GIF-images (if appl.) through a IE-specific stylesheet.Google: "conditional comments ie".
  • Using Fireworks to generate a PNG8-version with Alpha Transparency (supports 256 colors and transparency levels), Google: "png 8 alpha transparency"

Good luck!

Answered about 7 years ago by Jens Hedqvist
Marcel 57
2
points

Yes, IE6 never supports transparency in PNG You have different ways to solve this:

  1. The cleaner way is, that i suggest is, replace in a IE specific Stylesheet the PNG with Gifs.
  2. The other way is to use one of those javascript solutions like UnitPNG or IEPNGfix.htc, which have sever limitations, like no repeat support and only possible on static elements.

    #

But think about it, i think your Layout could be made without PNG Transparency. Just by using jpg and slice them at the right places, then some CSS tweaking. you might have a look at http://swissfs.ch as a reference. I also have degradation in the background and sliced the layout to match with it.

Answered about 7 years ago by Marcel
1
point

This is the one I've been using for the past few years. It's very lightweight and I simply include it in all my pages in a conditional comment so other browsers ignore it - e.g.,

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

The [if lt IE 7.] basically says to browsers, "if you're IE and you're less than IE, read this!" (there's more on conditional commenting here that shows how you can target scripts at specific versions of IE).

Replacing pngs with gifs can work sometimes, depending on the image. On a current site I'm working on I tried replacing some small icons that have a drop shadow and a transparent background. Because the gif format only supports 256 colours though, you can really only replace a png with a gif if it's only got a small number of colours. Though the icons I was using were pretty simple, close up there was some noticeable banding in the shading of the grey shadow, so I reverted to the png format. You can always try gif and see what it looks like.

Of course the other view is that anyone who's still using IE6 (or particularly 5/5.5) will be used to seeing pngs with not-transparent backgrounds. I (and a number of my web developer friends) find that according to our server stats, the number of visitors using IE5 in particular is so low (on most of my sites we're talking around 2%) that it's probably not worth putting too much work into png transparency because IE5/6 users will be used to seeing images like that. I guess it depends on how much of a perfectionist you are. I just automatically include the png fix script on all my pages incase I end up using any pngs on the page - with a file size of only 1.5kb, it's not going to really affect page load times or take up loads of space on the server.

Answered about 7 years ago by NeonBlue Bliss
0
points

It's because IE6 is terrible. As has been said, Google IE6 + PNG transparency to find out more.

Answered about 7 years ago by Bob Martens
0
points

This is the best solution thus far, http://www.twinhelix.com/css/iepngfix/ , the documentation is a little spotty but it DOES work.

Good luck.

Answered about 7 years ago by Phil Cady
danwellman 5600
0
points

DD_BelatedPNG is the best png solution for IE6 at the moment - it uses JS and VML to replace specified PNGs.

It is fast and robust enough for professional use. It works with standard elements or background-images specified witth CSS and it allows background positioning, background-repeat and hover states.

You can use it by itself or with another JS library to extend the selector support.

MS's own proprietary filter to support alpha-transparent PNGs is very slow and does not allow background-positioning or background-repeat. Plus the filter only works with background images, not proper elements. Also, links which use the filter method are not clickable...

Answered about 7 years ago by danwellman