I`ve always tried to walk the straight and narrow path of W3C validation standards. I guess a lot of designers go out of their way to ensure validation partly as a matter of principle, partly for boasting rights (guilty).

However I think I`m going to have to make some compromises in that view due to IE6 lack of support for PNG-24 transparency (I`m not even going to talk about sub-IE6. Those are historical relics).

On the one hand there is a fairly robust and easy to implement CSS based solution that unfortunately doesnt pass the standards test. However it will solve the problem for IE6 users regardless of whether or not the have Javascript. (http://www.twinhelix.com/css/iepngfix/demo/)

On the other hand there are various Javascript solutions (tricky to implement at times) such as JQuery and so on. These will fix the problem and allow you to pass the validators but is it really the right solution?
Is doing this placing vanity ahead of good sense?
After all, which is more important; passing some validation test (that most users do not know or care about) or ensuring a good user experience for ALL browsers regardless of Javascript support.

I used to be in the second camp but I`m being swayed towards the first now.

What do you think?

Or you could just use transparent GIFs instead of transparent PNGs until IE6 is deprecated?

TWD, you're slightly missing the point with the first solution you pointed out. All of the solutions you suggest use JavaScript. The only reason the first one doesn't pass validation, is that targeting .htc files with CSS behaviors is not written in the standard, it is something that Microsoft invented. Personally, I use Microsoft stuff like {filter: alpha(opacity=50)} to get around the fact that there is no opacity support, for example, in IE browsers. This also doesn't validate, but I see no reason to stop doing it. There is certainly no real reason to not do it. It won't hurt you with search engines, and improves the user experience.

I don't understand the myth that validation is something that we must worship and be a slave too. Validation is a great tool for debugging, but for this, you'll just be wasting your time. Not everything needs to validate.

***EDIT***
To prove my point, here is a link to the validation of this very page that we are browsing: http://validator.w3.org/check?verbos...l%23post778764

Are you going to stop coming here just because the page doesn't validate?

Validation is a great tool for debugging, but for this, you'll just be wasting your time. Not everything needs to validate.

I agree completely. Making sure your code validates is a starting point, not the be all, end all, that some make of it.

IMO, semantic code and accessibility matter a WHOLE lot more than some validation 'badge', though valid code helps with both of these.

You might also look up the Unit PngFix - easy JS and a bit simpler to implement.

I just asked a similar question on stackoverflow. Some of the responses seem like they'll be helpful.

I have something that works without JavaScript, but there's a little bit of a catch. I just tested a method a little bit (using Fireworks, but hopefully it should work for other software too). You can use transparent PNG's in IE6 if you save them as a flattened PNG8 with either an alpha or index transparency. If you save as an index transparency, only the background will be transparent and everything else will appear with 100% opacity. If you save as an alpha transparency, the background will be transparent as before, but anything with less than 100% opacity will also not show at all. So that's the catch. You can use PNG8 as long as you don't need anything that is only partially opaque. As I understand it, the PNG8 essentially functions as a GIF, but with a little better quality and a smaller size in most cases. However, you won't be able to use more than 256 colors so if you're working with gradients, you'll suffer some quality loss. It's not the right tool for all situations, but it's nice to have in the toolbox.

I use PNG8 very frequently, since it almost always has a smaller footprint than a GIF, with identical quality (only very tiny 2-5 color images are smaller as a GIF).

Not sure if anyone else has posted this here, but to get around the lack of PNG support in IE6 what I normally do is define 2 styles in my stylesheet and specify with the !important flag to choose the one that works best for the browser using it.

Looks like this:

background-image:url('../images/bg.png') !important;
background-image:url('../images/bg.gif');

The browser then chooses which to use, hope that's some help.

It's kinda getting to the point for me where I just prefer to let things degrade somewhat gracefully in IE6... some things are just not worth the trouble anymore. If I have a client project that is requiring the use of transparent pngs it's probably worth it to try to please them, but for my own projects I wouldn't even bother and would just let IE6 users miss out on the effect.

Originally Posted by tom0407

Not sure if anyone else has posted this here, but to get around the lack of PNG support in IE6 what I normally do is define 2 styles in my stylesheet and specify with the !important flag to choose the one that works best for the browser using it.

Looks like this:

background-image:url('../images/bg.png') !important;
background-image:url('../images/bg.gif');

The browser then chooses which to use, hope that's some help.

Thanks mate, thats a great way to get a qucik valid alternative.

I mean personally I don't know WHY people still use IE6, but they still do

Cheers again,

Saf

< links removed >