Great tut. Unit PNG Fix works just fine.

IE sucks, go for the alert .

This reminds me of weekend quick tips.

::heart ache::

Thxs 1000000!

@Dan – I know; I miss them too. But I decided that they simply didn’t follow the path set by PSDTUTS. …And that’s a good path to follow!

We’re getting there though. 20,000 subscribers!

Anyone want to save me the digging, and answer the question of validation with each of these? Do any or all fixes invalidate your x/html and/or css?

The Unit Png fix works well but if you want to create a hover menu using the css sprites method or anything else on the page that requires background-repeat or background-position settings. The Unit png fix inhibits it, even for images that are not png.

Instead I used the twin helix fix (after freaking out and pulling out my hair on other fixes). It saved my ass.

Or you could not use PNG24’s at all and make use of the little known alpha layer of 8bit PNGs. For more information read this article:
http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

IE6 wont need any PNG hacks and will simply fallback to full transparency rather than partial.

Great post Jeffrey, I find that googles IE7.js code words like a charm, all I have to do is name my image with a -trans.png on the end and thats it.

Thanks for the resources

Ha ha ha ha… I’m going for the fifth option

I don’t know how people design/develop or even read without some sort of font smoothing. Windows is sooo ugly. Nice visit to the available solutions though.

Thanks for that

You say that you are not going to use aptana much longer, so I am wondering what program you plan use instead.
And while at it, why not some article on that subject.
Thanks
Joe

DD_BelatedPNG Fix is pretty recent so I’m giving it a run on some websites, but it looks promising!

I’m a bit scared to make a statement yet, so I’ll just design my sites for all users.

By the way, you forgot an ending quote in your code’s “alert” line. Just picky – it might mess up some of the new coders.

Great rundown on PNG fixes!

with the recent discovery of another IE security flaw, I prefer not to support IE.

For the sake of this article, I prefer posting a statement.

Nice article!

A lot of users in a corporate environment don’t have a choice when it comes to upgrading browsers (well, I guess there’s always FF on a stick). When working for a client you can’t really ignore IE6, it’s still being used by what 20 – 30%?

I use the Twin Helix Fix, but it loads the page first with white backgrounds for transparent pngs and they turn transparent when most of the page the last time.

The “behavior” CSS property doesn’t validate. But I use conditional statements to call an external file for lteMSIE6 and put the “behavior” property in there. And I really don’t care if that file validates, since it only targets older MS browsers anyway, so all the MS specific properties, like “behavior”, “zoom” (for haslayout), etc. can stay in there.

Anyway, I’ll have a look at DD_BelatedPNG Fix and see how that feels.
Thanks for the list.

wow! screencast intro rocks. really nice

and great tips.

by the way just want to share this sh*t about EI http://tech.yahoo.com/blogs/null/111811

Nice Article !!

Solves most of the PNG issues…

hi,
I found this jQuery png fix.. it even fixes repeated background image…
http://jquery.andreaseberhard.de/pngFix/

Nice work Jeffrey. Thanks for posting.

Better way to make a statement, is using conditional comments:
(hope that the blog comment system do handle this)

Please use any browser except Internet Explorer !!!

It didn’t.

See here then:
http://www.quirksmode.org/css/condcom.html

I use the Twin Helix Fix (from Angus Turnbull)
Its simple to implement and does not effect my other code.

All this is great, but has anybody tried to make a slideshow with PNG’s that have a shadow and works in ie6/7..?

With straight pictures it’s no problem, but what if the pictures are under an angle like the pictures shown on http://www.rbmotoren.nl. All you get then is a blue background in ie6 or a distorted shadow in ie7.

Has anybody run into this problem?

I never have problems using transparency on IE6 using iepngfix.htc. Takes seconds to install and use.

Yeah, go get the fifth method!

It is a nice list of fixes but I must admit my back gets up when people suggest telling users what browser to use and go on about not supporting IE6.

Not supporting IE6 in your designs is incredibly stupid and poor design.

Great Tutorial!
Not sure if i would use on a clients project the “Don’t Fix It! Make a Statement!” but i am sooooo Tempted sometimes

I suppose you have to think about IE6 users who view the web from work with no Administrator access to install a new version and lazy IT who wont upgrade their computers!!!!

does ie7 has the same problem? because i thnik ie6 is actually dead.

i agree with the last point. don’t fix it. instead go for IE death march

@Legion Dave – I agree; as a designer, you’re not often in the position where you can ignore IE6, or tell people to upgrade. The unfortunate thing is that either through ignorance or restriction, a lot of people don’t. We’re stuck with IE6 for a while, we have to get over it, and thinking that people are going to upgrade because your little site tells them to is slightly arrogant.

Jeffrey does point out this fact in his screencast. I’m surprised nobody’s lambasted him for using document.write()

GOOD ARTICLE

Try opening this link in IE6:
http://www.microsoft.com/windows/downloads/ie/getitnow.mspx

If microsot doesn’t even test their websites in IE6 i don’t know why we should!

I think it’s good to support IE6, mainly for all those poor office workers who have no choice about upgrading, but would still like to use your shiny new web app

I’ve spent a bit of time testing and trying to support IE6 with my web app, but I always cringe when going from Firefox to IE6 and experiencing the horrible JS speed.

Best solutions for this is …………….. dont use IE

greetz
http://www.opensourcehunter.com

Hey Jeffrey!

This was great been trying most of theese, but never heard of DD_BelatedPNG Fix so going to try that out.

You missed a ” in the alert code example

(”Upgrade your browser, you big dummy!);

After the !, it should be

(”Upgrade your browser, you big dummy!”);

What’s wrong with Aptana? What are you switching to?

How heavy is that ie7.js? How much of an effect does it have on pageload?

Or you feed IE6 Microsoft’s proprietary filter by way of an IE6 specific stylesheet (wrapped in conditional comments of course). I find it works better to use the filter on each specific element this way…as long as there aren’t dozens and dozens of elements that require transparency. In my experience, catch all scripts have slowed the page down or produced unexpected results.

Great write-up though..cheers!

Thanks for the list… very helpful as usual
The unit fix is the one i use the most

Just an idea for a post, but as a noob in web design I have seen 101 fixes for IE 6 and below for all sorts of issues. It would be cool to have one post to cover all of the common problems and fixes one should have for IE in one place for reference. That would be really helpfull.

If you’re going to use IE7.js, you might as well use IE8.js that you can download from the same page. It upgrades IE5-IE7 “with advanced CSS features missing from MSIE7… You do not need to include IE7.js if you are using IE8.js”.

Here is the code for IE8.js

crap…

</code

double crap…

(opening comment tag goes here)
[if lt IE 8]>

<![endif]
(closing comment tag goes here)

nevermind:
http://code.google.com/p/ie7-js/

I’d go with the last option as well. Curious – how do you go about doing so? Not sure how to implement that.

I usually go with a softer version of the statement: serving GIFs instead of PNGs for MSIE 6 users via CSS hacks and browser detection.

Yes, designs look more retro that way (which might actually be a feature instead of a bug), but given that people that still use MSIE 6 for their browsing see all the other sites like that as well I think it’s a good compromise.

Yep unitpngfix rocks.

the best part about DD_BelatedPNG is that it uses vml to render the png. vml has native png support.

the worst part is that the name is totally stupid and ugly.

Thanks for this tutorial.

Very nice.

UNIT PNG Fix Link is Broken!

I’ve used the IE7.js file on a couple of sites to fix the PNG issue and other IE6 shortcomings. I’ve heard of most of the others but haven’t had a chance to use them.

Interesting link about PNG8’s. I’ll have to look into them for future projects.

nice good help, i have seen video cast for Unit PNG Fix at csstrick.com and it is really work fine, but now i have a choice. thanks for the tutorial.

Thanks for sharing it, i love the last one , and I am using it.

@Jeffrey -What program do you use to do your screencasts? And why switch from Aptana?

10 Gold stars for this one

Never know of this before, so thanks

I seriously have a hard time liking IE6 anymore. I am developing templates and its such a pain to tweak them all to make all browsers happy.

@ Insinc

If that story is true, that would be great!! People would finally stop using IE and we can concentrate on designing rather than coming up with IE workarounds like this!!

Another way to deal with this IE6 issue is to redirect IE6 users to the firefox download page. It works every time, and is extremely easy to implement.

Great screen cast.
DD_BelatedPNG Fix seems interesting. I’m going to give it a try.
I believe IE6 is still going to be around for some time. Some users are conservative.
Erik Vold’s suggestion about redirecting IE6 users to the firefox download page is interesting however you would want your visitors to stay on your site.
Part of a solution could be to detect if visitors are using IE6 and then in a discreet way suggest firefox as an alternative or upgrade IE.

As mentioned. Would also appreciate an article about the top Open Source or at least free programs.

The Twin Helix Fix is what I use…it’s quick, easy and really only requires 1 line of CSS.

Don’t Fix It! Make a Statement!

Great hahahaha!!

Brazil Brazilll

http://www.leomiranda.com.br

Thanks, I knew you could add code to take care of IE6, but had no idea there were so many choices.

I prefer making sites work in IE 6 too. Too many office workers, their companies refuse to upgrade.

I was surprised to see a large website/store with a warning to IE users, with a big yellow background, it said: Time for a browser upgrade! and suggesting they use firefox, saying this website works best on firefox, download it now.

Great article! Really interesting and useful!

AH great tips, iv only used the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

#header {
background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/mttcarpentry_01.png’, sizingMethod=’crop’);
}

Which destroys my Hyperlinks on menu’s, i spent hours researching IE6 png fixes, i love the idea of the IE7.js implement =]

Thing is, i still have no way of testing in IE6 only browsershots X_X

Cheers for the heads up!

I chose the ignore IE javascript fix! The percentage of IE 6 Users on my site has gone down 2% in the past 2 weeks.

thanks a lot tut

Hmm…. they all seem to be making Error messages pop-up in my IE6… none of them is working.

I like the IE7.js, it fixes a lot of other IE6 bugs as well, giving me the freedom to use the full range of CSS 2, and I think that 30KB is not that much when put in conditional comments.

Twin Helix sounds promising, oftentimes you need to position background images. I will give that a try.

Also, nice article on png8. I honestly didn´t know about that alternative.

Keep it up.

I like Twin Helix, seems to work without issues.
Don’t bother with jquery’s pngFix, it is ‘fatally’ flawed (a major issue is the png’s being scaled to about 10% of their actual size 90% of the time).

ps. I hate IE6 and Safari on Mac!

Everyone should start charging extra for IE6 support.

IE6 should be illegal

I usually don’t provide IE6 support for my own sites. I think that’s justified by the overall audience of these sites. But of course, it depends.

The double-margin bug of IE6 for example is easy to fix but adds non-semantic code to the CSS. A similar case with PNG’s. There are all kinds of hacks for a wide range of bugs, but by making a statement against it you keep your code clean. I think that’s more important than providing support for an acient browser of which its market share is significantly decreasing the last year.

i m using a combination of conditional commnets twin hellix

and based on and idea by savethedevelopers.org a javascript drop down message suggesting to upgrade to the latest version of IE

check it out

http://alexandrahasekidi.gr

its in greek but you will get the point

I did a job once for my school. All the computers over there still use IE6, and it was for their intranet so I was kinda bogged down with that.. got a jquery plugin that worked nicely to keep things looking nice.

If it were up to me though, I would just stick the conditional upgrade message, its too much hassle to make it compatible, and I guess it promotes keeping such a lame browser.

Another option is to use Flash. Sometimes an reasonable option if you’re cross-fading big images with a transparent background (on a header etc.) You can get a much smaller file size than a bunch of pngs, too.

I think the best way is fix & notify!! ahah
thanks for your useful post!!

Thanks for this! The Twin Helix Fix worked the best for me. A bit slow though…

in line 2 of your jquery code you missing a quote to end the string ‘Upgrade your browser, you big dummy!’

Thank you soo much. I couldnt get any of the fixes to work, but the warning message worked perfectly.

I tried Unit PNG Fix long before but somehow my layout went crazy b/c of code conflict. Since then I use Twin Helix Fix (from Angus Turnbull),

Love It! I like the DD_belatedPNG. I am using it

I really must start informing users who visit my sites from IE6 that they should get a better browser!

I’m thinking of having a bar across the top of the page that has the relevant information. What do you think?

PNG-8 Alpha Transparency – http://blog.brenelz.com/2009/01/27/png-8-alpha-transparency-screencast/

Allows you to not even need a hack for IE6!!! and it also has smaller file sizes.

in Twin Helix Fix (from Angus Turnbull)
The “behavior” CSS property doesn’t validate

but post is great anyway

Ignore IE6 altogether?

Thanks Jeffrey, this helped me out really quick!

Thanks. I’ve been looking for a good, working, and easy to install fix for this problem. And i finally found a great one.

My favorite is the DD_belated PNG fix. It’s easy to install and it works perfectly!

Thnx again.

Thanks dude, finally I can resolve the transparent png and it’s easy.

Go for png8 with alpha transparency and a conditional notice for ie6 >
Works in all browsers and won´t look that horrible in any of them.
PS. Depends still on the size of your graphics. Large graphics need to be 24-bit to look good and is often smaller than png8 with alpha.

Get yourself a decent browser!!Firefox

ola mi add nu msn senhorH4CK34@hotmail.com blz ?

Hi Jeff,

You missed the supersleight jquery plugin also fix png by Drw Mclellan, its right here http://allinthehead.com/retro/338/supersleight-jquery-plugin

The Fireworks PNG8 / no code method can work if your image doesn’t contrast with the background and the jagged edging isn’t too obvious. But if you need proper levels of transparency like a shadow then you have to use one of the JS hacks to support alpha.

Unitpngfix.js seems to work the best though in my experience it only works with 24/32 bit PNGs, which can have huge file sizes.

Has anyone got it to work with Fireworks alpha PNG8s, this would be the ideal combination for IE6, alpha and index colour.

Any suggestions on using a transparent background that still allows hyperlinks to work in IE6? I’ve come across a lot of PNG fixes, but none seem to allow hyperlinks to work…

Never heard about DD_BelatedPNG. It’s perfect, thanks!

I really impressed with DD_belatedPNG among these 5.

Nothing can be better then this.

thanx to ‘Drew Diller’

this Unit PNG Fix, don’t work.. **** this site..

i mean **** UNIT PNG FIX SITE>.

Try this folks…

http://jquery.andreaseberhard.de/pngFix/

how do i fix the active x issue? (I have .js files linked in my html page…) does anybody have the code for that?