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?
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:
- 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"
Yes, IE6 never supports transparency in PNG You have different ways to solve this:
- The cleaner way is, that i suggest is, replace in a IE specific Stylesheet the PNG with Gifs.
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.
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.,
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.
It's because IE6 is terrible. As has been said, Google IE6 + PNG transparency to find out more.
This is the best solution thus far, http://www.twinhelix.com/css/iepngfix/ , the documentation is a little spotty but it DOES work.
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...