png transparency can degrade gracefully in Internet Explorer
I wouldn't have ever believed it, had I not tried it for myself. NewtEdge just turned this regular Wednesday into a fantastic breakthrough event for me. They're a site about web development, and they cater to standards compliance. But specifically, they've hit upon something that has me drooling.
A png file is great for transparency. It's phenomenal, in fact. It's the only file format on the web that can be translucent, and it's the only one that can have soft edges (no jaggies) and let the background show through. It also is only rendered properly by modern browsers but not IE for Windows.
There are several tricks to fool IE into displaying the files properly, and they involve extra javascript and css. Most people, this author included, aren't a big fan of these hacks because they cause other problems, but we use them anyway to get the look we want.
Without any hackery, a png graphic with alpha channel transparency has an ugly light bluish gray box around it when viewed in IE, but with NewtEdge's trick, you can change that background color to any hue you desire without using any css or javascript hacks at all. That's right, you just have to edit the png file itself. As if that weren't enough, it doesn't have any influence on how modern browsers render the file -- it leaves the alpha-transparency intact!
Like I said, I wouldn't have believed it had I not tested it myself. I applied it to the Javascript Dock and it works perfectly. If you've got a copy of IE for Windows handy, give it a look.
- under:
- Web Development
- Posted on
- 2005-04-06
Comments:
Almost there...
Needs a bit of tweaking but its better than nothing.
The proof
Gamma
That's gamma for you. It's a shame that Windows and Mac use different gamma. Peculiar how it is though, the PC has a slight green shift. Well, I adjusted the backgrounds a bit, and they look right on my Powerbook with VPC, I hope that'll do it.
Mui-bueno
mui-mui.
Neat hack, well, pseudo-hack as it seems...
Quick Question
That article only lists (icky) Windows only software. Is there an easy way to do it on Mac? Or did you just use VPC to get the test done?
I used VPC. I'm interested in finding a similar low-level editor that works on OS X though.
my god, your article just saved me a lot of frustration and agony as i work on my first website. i want to distinguish the design with custom fonts and graphics, and my first passes (prior to reading your article) looked great everywhere except for IE 6 on the PC. thanks so much for posting this tip.
This article is closed to further commentary. But you can always contact me directly.