Evening Tip: Force IE6 To Display Alpha Transparency
We’re running short on quick tips! That means we need your expertise! For tonight’s evening tip, I’ll simply refer you to the “2 Minute Video Tip” that I created on my personal site, Detached Designs, this morning. We’ll be back to the normal format tomorrow. Keep reading if you have some ideas.
This video tutorial will teach you how, by using a script created by Dean Edwards, you can force IE6 to render 32-bit PNGs properly, not to mention the other added benefits of the script – including advanced CSS selectors, bug fixes, etc. Watch The Video Here. P.S. This is the style of video that I’m hoping to bring to NETTUTS very soon. If such videos are intriguing to you, be sure to let us know. Obviously, they would go more in depth – as this one is simply a quick tip.
That’s it for tonight. Who knows what tomorrow will bring!
We Want Your Quick Tips!
Have a killer quick tip that you want to share with your fellow readers? EMAIL US with your idea, and, if you’re chosen, we’ll pay you $50. Refer to the other quick tips on this site for reference.
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
I often use Unit’s PNG fix; the filesize is less then < 2kb :)
http://labs.unitinteractive.com/unitpngfix.php
I normally use AlphaImage loader on one or two PNG files in my design (in an IE6 stylesheet). I am so used to watching tutorials in TextMate on a Mac, I must admit I was thrown for a loop with the whole Vista thing. :) Or is it Windows Mojave.
I think video tutorials will be a great thing to bring to the site!
A problem I’ve run into using this, and I wish I had specific examples, is an issue with links when you’re using pngs for backgrounds with the IE-7 script. If I recall correctly the png fix involves building a new layer and rendering the pngs there. In certain circumstances this can cover the content.
Not real helpful without an example I guess but if you run into weird behaviour where onClicks or links are inoperable suspect is the IE-7 script.
I’ve worked with Unit PNG fix as well as Super Sleight for handling PNG issues in IE6… unfortunately, as convenient as these fixes are, my work builds our sites using the ASP.NET framework, and as a lot of these sites are quite massive… have a lot of includes, etc, it seems you always wind up with this brief blip of the hazy blue color before the PNG fix is actually applied. Sadly, clients tend to cry over little things like this which leads to the more cumbersome method that Douglas mentions above… goes something like
.someStyle { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=image.png, sizingMethod=’scale’); … other properties }
html>body .someStyle {background: image.png; …other properties}
IE6 ignored the selection method used in the second style definition, whereas FF and IE7+ recognize it.
@Jason – I know exactly what you’re talking about. The alpha portions of the image cause issues with overlying links… A solution I’ve found (as lame as it is) is to wrap the contents like:
oops, sorry, LIKE:
<div class=”withPNGBackground”>
<div class=”content” style=”position: relative; z-index: 5;”></div>
</div>
“This is the style of video that I’m hoping to bring to NETTUTS very soon” – but hopefully with a better placed microphone so that the keyboard noise doesn’t come close to drowning out the narration.
And I was getting mighty annoyed at the narrator for talking about “pings” – until I decided to Google it, and discovered that’s the way it’s supposed to be pronounced: http://www.libpng.org/pub/png/spec/1.2/PNG-Introduction.html (scroll to bottom of page). Silly me – all these years I’ve been saying “P-N-G”. Guess you do learn something new every day. Still think it’s a stupid way to pronounce it…
Other than those quibbles, that was a pretty good tutorial, and I look forward to seeing more like this here.
i use PNG fix in IE6 before but now. i dont bother. hahaha
nice video anyhow. looking forward to see more video tutorial here in nettuts.
Looking forward to more video content on nettuts.
Thanks for posting the tip.
Here, a german one:
http://www.davidhellmann.com/tipps-und-tricks/transparente-png-im-internet-explorer-6/
Nice tutorial overall; though I much prefer the iepngfix.htc method:
http://www.twinhelix.com/css/iepngfix/
Like other PNG fixes it will not work on repeating backgrounds; but I enjoy it more because I’m not forced to comply with a special file naming system, and since you can apply the fix to a CSS class you don’t have all of your PNGs being processed by the fix.
Pretty good one. Thanks
@Rob – Yeah, I somewhat agree with you. However, I like all of the other benefits of using the script. But definitely – adding “-trans” to the end of your filenames is a drag. The “UNIT Fix” is a nice light-weight alternative as well – I think about 2k.
It’s probally wrong but, I say screw IE6 get people to upgrade
It does need to be noted that I.E.8 is well on its way. Microsoft, obviously features automatic updates. However, not everybody uses them.
The question is, how to make widespread note to older computer users (that aren’t so comp-savvy) that I.E.6 is out of date.
I seem to notice that, a good majority of my non-comptuer-savvy friends are using Firefox 3.
Firefox is making leaps and bounds right now.
@ Taylor
I agree with you; unfortunately IE6 still has a compelling number of people using it. Check out W3Cs Browser Stats page:
http://www.w3schools.com/browsers/browsers_stats.asp
As of July of this year IE6 was still upwards of 25%! Ridiculous that people aren’t upgrading – but when you have to build sites for usability and a quarter of your visitors will likely be using an outdated browser you have to appease the masses.
And I think we can all agree the days of “This Site is Best Viewed With X at Y Resolution” are long (and happily) gone.
Best PNG fix script is twinhelix’s PNGfix v2.0 alpha, it supports with additional js background position and repeat, and it really works. I can confirm it. Just you need to know how to use it and how to apply. It can crash IE6 sometimes when you apply behavior it to an element who is nesting img tags so you need to apply behavior:none; to those images. Last couple of days i tried them almost all and twinhelix is the way to go. Winner.
@Rob
But without “site best viewed with” comments, and with fixing pngs, et all, people will never see any reason to upgrade. If we don’t fix pngs and consider adding a (conditionally commented) disclaimer explaining why the site might not be looking its best to IE 6 users, then they will not have any reason to upgrade.
If old operating systems kept getting fixes and feature upgrades, then users would have little impetus to upgrade to a new one. I realize that is a loose metaphor that will fall apart, but the point is obvious.
We designers are the reason that they aren’t switching.
@InLikeAlion – That is a lame excuse for not offering fixes… Obviously it is down to your personal perception on the whole matter and what benefits you want your visitors to receive. I suspect that the majority of IE6&&<IE6 users are not switching either cos’ they’re not allowed to or they just don’t know much about computers and the internet… U know what I mean, the kind of people that ask, “Can you please fix my Internet” … Gawd! lol
Anyway, we, as web developers/designers should not limit the extent to which an IE6 user can enjoy our sites – especially if we’re diminishing their experience just to force them off their browser…
@Taylor – Read my comment above – I’m gonna hunt U down!!!
Anything to make my life easier with IE6 is a plus, so thanks!
The majority of IE6 and <IE6 users are business users who are locked in to that specific browser due to company budgets not allowing an upgrade of service and the users not having access to upgrade the browser themselves, or businesses that choose to remain where they are due to them not seeing a need to upgrade-everything still works fine for them, right?!
It’s pure professionalism to just embrace the problems that the WWW brings with it. In fact, try and enjoy the problem solving like a puzzle, it will allow you to walk in to the office every day and smile—I do!! :D
Knowing how to solve these problems gives you an edge! … So, to quote Paul (^), “Embrace the problems”!!!
It varies by website but I believe that as a whole IE7 users have just recently surpassed IE6. Nobody is forcing you to develop for IE6 but nobody is forcing users to upgrade either.
Using a library in order to fix the PNG-issue isn’t advisable. Imagine having that on a really large site in combination with another JS-library = NO GO.
CSS reset + regular IE-pngfix already does this well and is proven to work … so … :)
@Tommie – I’d agree that, if all you need to do is take care of the PNG problem – you shouldn’t use this piece of Javascript. In that case, I would advise that you use the UNIT fix. However, I like to utilize the added features that the script provides – including advanced CSS selectors, bug fixes, etc.
I hate IE6, but realise you can’t force anyone to upgrade. That’s just wrong. We have to live with what we have put in front of us. That often means using IE friendly PNG images. Remember you can use semi-transparent 8-Bit PNG files – Not perfect, but what about users who don’t have JS enabled?
Sure its a low percentage of users who are on IE6 now and don’t have JS enabled but it will happen. IE5.5 is still in use also, but most are willing to neglect that one (myself included).
IE7 has been out, for what, almost 2yrs now…some things move slower than others I guess.
Internet Explorer 8 is on its way, anyone tested out Beta 1?
You can choose not to support IE6 for your personal site(s), I know I do. Unfortunately however, we are stuck with IE6 up until, and that’s my opinion, IE9 is released when it comes to client work.
A lot of corporates are still using IE6, which makes it very much alive if you consider percentages.
At this stage I really don’t care about catering to some archaic browser that should be removed from all computers in the world. Microsoft really made designer’s life a bitch with all their crap until recent. I would rather they see pages all messed up rather than the way it should be if using a MODERN browser. Why make it fun and easy for the non-modern browser using user? I know, I know, “there are still close to 25% of the world using IE6″. Well they suck! There I said it. They need to get with FireFox already. IE is lame.
Don’t take me too seriously, I’m only venting.
morphlex, you are right. IE6 and other older version of this so called browser must be removed.
what happen to the quick tips?
Some good points made about IE6 – I’m currently in a situation where I have to work with the browser, since the end users are in an organisation where IE6 is still largely the norm.
Frustrating, yes, but there’s nothing I can do. :)
On a personal site level I will neglect anything but the newest stable release browsers. I however work for a school system that is using specially written education software/sites that require older versions of IE (yes require IE), flash, and quick time. I, as an IT person for this system despise the forced life of older software and extensions, but cannot change this. It is nice to see so many ways around the PNG problem. I have simply been placing the correct mattes on my gifs to get the accurate transparencies.
I am very surprised to see so many comments short of flame war here. I’m a new member to the tuts+ community, but I was under the impression it was a more proffessional community than what I’ve gathered from some posts. I am even more shocked to see web developers that don’t test their sites for compatability in every latest stable release browser. I as a developer test in every current stable release, betas, and one generation older. Its the simple fact that the average user is not a computer genius. In fact they are barely literate. These people are then spoon fed thousands of opinions from MAC lover/haters, Windows Lover/Haters, and Linux lover/Haters. How are they supposed to learn anything if everything is supposed to be the best and the worst at the same time.
Constructive opinions are the only worth speaking and if your just going to bash people on their opinion of a product then at the very least back it up with more than “I don’t like it cause it sucks!” Forgive me but this is simply the fourth or fifth comment section on this site I’ve seen this type of activity and finally had to say something!
Try TweakPNG!
http://entropymine.com/jason/tweakpng/
Works like a charm!