Welcome!

[brad_langdon]

Does anyone out there know a sure fire way to make transparent png's display properly in ie6?

I have heard a few "solutions" before but they don't seem to work.

I would love to finally put this consistent limitation to rest...please help!

[Andy]

A 'Flat PNG-8' saved with Alpha-transparency in Adobe Fireworks.
Internet Explorer 6 supports this with boolean transparency meaning it'll essentially look like a GIF. It'll progressively enhance itself in more capable browsers (display itself with alpha-transparency). This is the first solution you should consider.

If that don't work for you and you really really really need alpha transparency then you always have the DD_belatedPNG script. Compared to the above solution, this is a hack and won't work if javascript is disabled.

Good luck

[Ryan Williams]

Yes, while a number of hacks and whatnot exist to get PNGs working, they all have limitations (eg: flickering, CSS issues) and all break without JavaScript.

The blunt fact of the matter is this: it is not possible to get IE6 to support PNGs as well as other browsers can. However, as long as you learn to understand the limitations of the various workarounds you can at least make sure it looks proper in IE6.

[smart.1]

The best I've used so far is the HTC fix, which has support for "background" attached pngs too.

[Fruityger]

First I'd would use the twin helix .htc png-fix or the jquery.pngfix. But I found designs often needed tweeking, because of slow loading times, complex background repeating, flickers etc. But since you are already in implementation fase it's annoying and costly to go back to designing.

So I would present IE6 with an alternative stylesheet, that did not use transparant .png's at all, but plain .gif's or jpg's and the occasional layers with filter:alpha. But this would make implementations more complex and they took longer. They were however closer to the initial design and worked without javascript.

Now I just drop Dean Edward's IE7.js in my pages. Next to eliminating a lot of other quirks, it supports PNG transparancy like IE7. I think it is user-centered thinking to upgrade their browser and eliminate some bugs for them

A

Code: Select all

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->


in the header loads fast enough, caches and is with 11kb a minor burden in the first place.

Of those 17% IE6 users 5% has no javascript on. This is 0.85% of your userbase. Let's say less than half of those have javascript off because they are webcrawlers or users with screenreaders or something that won't render transparancy and won't care for it in the first place.

That leaves us with 0.5% of users with a depricated browser and no javascript. I'd just make sure the page still loads visibly for them and that is that. If usability is about user-centered design, don't forget that the superuser of the design is you. You also have to work with it and debug it. Don't make it too hard on the superuser.

[r_jake]

http://labs.unitinteractive.com/unitpngfix.php is very lightweight, easy to implement and seems to work without glitches. Again, will break if JS is disabled.

[Andy]

that did not use transparant .png's at all, but plain .gif's or jpg's and the occasional layers with filter:alpha.

Why?

As previously explained, GIFs has no advantages to PNG-8 which has worked in IE since of version 4.0b1.

PNG-8 offers:

• Smaller file sizes.
• Full palette.
• Boolean transparency (same as GIF) in older browsers (<= IE6).
• Full (alpha) transparency in more capable browsers(>IE6, Firefox, Safari, Opera et al.)

GIF on the other hand has:

• Larger file sizes.
• 256 colour palette.
• Boolean transparency

The only advantage GIF has is animation (until APNG, which is backwards-compatible, becomes widely implemented).

Remember, people.. Do your research!

[Fruityger]

I was talking about semitransparancy. I said .jpg or .gif to explicitly exclude semitransparency.

For a column with a semitransparent background a solution to deal with IE6 would be:
- alpha transparancy
- just make the background non-transparent and substitute with a background-color, a .gif, .jpg .png whatever.

For semitransparency it does not matter if you use PNG-8 or not. But if you just stick in a 50% opacity PNG-24 it will renders some ugly kind of lightgrey in IE6. You can either pngfix it at the cost of loading and flickering, or just target the css specific for IE6 to quickly make the design more coherent.

For full (anti-aliased) transparency a PNG-8 would certainly degrade better.

This by the way is exactly why I don't like you and posting here anymore. You either take stuff out of context or go out of your way to find something to attack me on, while we both perfectly agree on that (=wasted time). I rather spend my energy on something else than defending my free tips, experience and help. If I want nagging, insecurity and know-it-alls, I'd better just get back to work.

[Fruityger]

And more specifically why? Because IE6 was not build for good transparancy support.

If you need to design a site with a target group of 20%+ of IE6 users you are doing good by completely rethinking designs that call for complex semi transparancy from the start. Or you create a workable solution where you disable the transparency for IE6 users. Hacks are just that: a hack-job - IE6 on steroids. But a logo with a soft shadow also looks like ass in png-8 IE6.

I think in many cases it can be a proper solution to solving IE6 Transparency: disable it in conditional css and work it in the design. Long loading hacks do no-one a favour.

<br clear="all" />

[smart.1]

If you need to design a site with a target group of 20%+ of IE6 users

A recent study by some big monitorig university (forgot which) program places IE6 users under 5%. Seems like it is close to natural death.

[Fruityger]

IE6 is not dead, it just smells funny. Almost 1 out of 4 still in most stats.

[Andy]

This by the way is exactly why I don't like you and posting here anymore. You either take stuff out of context or go out of your way to find something to attack me on, while we both perfectly agree on that (=wasted time). I rather spend my energy on something else than defending my free tips, experience and help. If I want nagging, insecurity and know-it-alls, I'd better just get back to work.

It's not out of context nor am I attacking you. If you view my post history you'll see that I'm treating all users in equal manner. I correct what I see is incorrect or ineffective.

I'm terribly sorry that you feel that way but..

I am not targeting you. I have no agenda against you. It's all in your head. Things do not revolve around you. Get over yourself.

If you need to design a site with a target group of 20%+ of IE6 users you are doing good by completely rethinking designs that call for complex semi transparancy from the start. Or you create a workable solution where you disable the transparency for IE6 users. Hacks are just that: a hack-job - IE6 on steroids. But a logo with a soft shadow also looks like ass in png-8 IE6.

Go back and re-read what you wrote as well as what I've written. You would be viewing the same kind of ass with a GIF image (with substantially less of a palette, which might make it look even worse). As opposed to your PNGfix and GIF suggestions, PNG-8 is not a hack.

[Fruityger]

deleted. offensive words. that's not the way, frutyger. thread is closed. (Sven)

[Andy]

You pompous ass.

You're too kind. If you have any further compliments you're welcome to express them in a Private Message where I'll gladly deal with them. I'd advice you not to hijack any more threads to engage in your grudge against me.