You create the perfect site in Photoshop using the latest trends. Half of your backgrounds contain a nice 50% opacity to simulate depth. The only problem comes from that darn old IE6, and how it decides to display a nasty gray background. You try to search the web for a solution, but there are dozens of choices. How do you know which methods are the best?
In today’s screencast, I’ll show you five easy ways to deal with this issue.
Click on the icon in the lower right corner to move to full screen.
Unit PNG Fix
- Where do I Download It? : HERE
- Issues? : It doesn’t correctly tile transparent background images. Instead, it’ll will stretch your image. Not a huge issue, but beware. Other than that quirk, this method works perfectly. I find myself using it more than the others.
DD_BelatedPNG Fix
- Where do I Download It? : HERE
- Issues? : Nothing worth noting. Every fix has a few quirks, but this new fix might just prove to be the best so far.
IE7.js Fix
- Where do I Download It? : HERE
- Issues? : You’ll find that this file is larger than the others. That is because fixing the transparency issues is only part of what it does! It additionally brings many other IE6 deficiencies up to modern standards. Keep this in mind when choosing. If you only want to show transparency, this might not be the best choice.
Twin Helix Fix (from Angus Turnbull)
- Where do I Download It? : HERE
- Issues? : Angus has updated this file in the last six months; It now properly implements background-repeat/position! Rather than referencing a Javascript file, this fix requires the use of the “behavior” CSS property.
Don’t Fix It! Make a Statement!
Some people might prefer to ignore IE6 all together – as a way of making a statement. I leave it up to you to use your judgment. However, your decision should reflect your audience. If you wish to show an alert to IE6 users, you could use jQuery’s browser() method to detect IE6.
if ($.browser.msie && $.browser.version == 6.0) {
alert("Upgrade your browser, you big dummy!);
} else {
document.write('this is just for testing. Remove the "else" statement.');
}
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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 :D , 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 :P
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!