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.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )K3v August 20th
I often use Unit’s PNG fix; the filesize is less then < 2kb
http://labs.unitinteractive.com/unitpngfix.php
Douglas Neiner August 20th
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!
Jason August 20th
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.
Jeremy Peck August 20th
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:
Jeremy Peck August 20th
oops, sorry, LIKE:
<div class=”withPNGBackground”>
<div class=”content” style=”position: relative; z-index: 5;”></div>
</div>
cowboy_k August 20th
“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.
insic August 20th
i use PNG fix in IE6 before but now. i dont bother. hahaha
insic August 20th
nice video anyhow. looking forward to see more video tutorial here in nettuts.
Shane August 21st
Looking forward to more video content on nettuts.
Thanks for posting the tip.
David Hellmann August 21st
Here, a german one:
http://www.davidhellmann.com/tipps-und-tricks/transparente-png-im-internet-explorer-6/
Rob August 21st
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.
Nate August 21st
Pretty good one. Thanks
Jeffrey Way August 21st
@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.
Taylor Satula August 21st
It’s probally wrong but, I say screw IE6 get people to upgrade
Chris August 21st
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.
Rob August 21st
@ 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.
Vladimir Vujosevic August 21st
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.
InLikeALion August 21st
@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.
James August 21st
@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…
James August 21st
@Taylor - Read my comment above - I’m gonna hunt U down!!!
Ben Griffiths August 21st
Anything to make my life easier with IE6 is a plus, so thanks!
Paul August 21st
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!!
James August 21st
Knowing how to solve these problems gives you an edge! … So, to quote Paul (^), “Embrace the problems”!!!
Mike Bobiney August 21st
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.
Tommie Hansen August 21st
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 …
Jeffrey Way August 21st
@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.
Gavin Doolan August 25th
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).
Joe August 27th
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?
Ali B. August 30th
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.
morphlex September 11th
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.
Pankaj September 29th
morphlex, you are right. IE6 and other older version of this so called browser must be removed.
insic October 1st
what happen to the quick tips?
Shane October 1st
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.
Add Your Comment
( GET A GRAVATAR )Your Name November 21st