Comments on: Valid fix for PNG transparency on a single image

By: Bruce

Bruce — Thu, 17 Jan 2008 07:27:13 +0000

Kia ora Samalah. It's not my code; I'm just helping to share it ;-) Are you developing on a Mac? If so you can run IE6 under X11 in OS X as here, or if you use virtualization or a "real" PC, run IE6 and IE7 at the same time as here. To my eye your site has alignment errors in both Safari 3 and IE6; I think this is a box model issue and not down to the use of PNG. Fix this and the images should fit together correctly. I'll send you some screen caps by e-mail.

By: Samalah

Samalah — Thu, 17 Jan 2008 04:30:11 +0000

Thanks for working out this code, it works really well on your site, but I can't seem to get it to work correctly on mine, even though I have copied your directions exactly. The test site is:

[http://www.websitecreation.co.nz/SolutionGroup/index.html]

the png is the footer. I don't have a copy of IE5.5 or IE6 on hand, so I am relying on NetRender, an online IE6 renderer.

Maybe if someone with IE6 could let me know if this is working correctly??

Thanks :)

By: Mark Abucayon

Mark Abucayon — Sun, 09 Dec 2007 02:42:11 +0000

this saves my day. thanks

By: Nick

Nick — Wed, 21 Nov 2007 04:49:03 +0000

Hello Bruce,

Thank you so much for the post. I was going crazy trying to get transparent inline png's (for logos with links) to work in IE6. Great trick with the padding!! You are a superstar.

Re #12 and #13 - it definitely is possible using a similar technique to the above for png's as background images in CSS.

I am not sure who the brains is behind this technique but I do remember stumbling upon it somewhere on the web - and it works for me every time. I am also not intending to be a guru on the subject - just thought I'd add to the png love as this works for me in IE6 everytime.

I setup a page here.

Hope this helps.

By: CSS PNG Image Fix for IE » Blog » Komodo Media

CSS PNG Image Fix for IE » Blog » Komodo Media — Tue, 06 Nov 2007 06:49:19 +0000

[...] We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency to not show their transparent regions, so you have to use some crazy IE6 proprietary filters. Moving on. [...]

By: Bruce

Bruce — Sat, 27 Oct 2007 22:15:59 +0000

Fabrizio, this trick is for fixing transparency for inline images. I don't believe it can be applied to an image loaded from CSS. However, for menu buttons you could combine a transparent inline image (plus the fix) with a transparent background GIF (no fix required), couldn't you?

By: fabrizio

fabrizio — Sat, 27 Oct 2007 15:59:18 +0000

Hi I have tryed ur solution and it works! but im using transparent png images as a bakground for my menu butons and it's not working. is this fix valid for background images also or im doing something wrong?

ty for ur support

By: David C. Pearson, M.D.

David C. Pearson, M.D. — Tue, 24 Jul 2007 02:42:43 +0000

Thank you so much! I had been using the pngfix.js script as well until I found that it broke my Google map API. I, too, was banging my head against the wall looking for a solution without having to give up my alpha-transparent PNGs (stupid microsoft!). This solution works cleanly and brilliantly! If you want to check it out in action, see my map page on my website:

[Commercial link removed]

Thanks again! (of course, if people wouldn't use IE6 that would relieve a lot of headaches!)

--DCP

By: Chirru » Blog Archive » Please check if my map is visible?

Chirru » Blog Archive » Please check if my map is visible? — Tue, 24 Jul 2007 00:13:53 +0000

[...] Ralph: I just fixed it (perhaps by the time you were looking at the page). The trick was indeed to not use pngfix.js and instead use this trick: http://www.bioneural.net/2006/08/09/valid-fix-for-png-transparency-on-a-single-image/ This way I only apply the alpha-transparency hack to the two images (the phone number banner and the gift card girl) that need it. Simple, and nicer than the javascript hack. [...]

By: Zeeshan

Zeeshan — Wed, 14 Feb 2007 19:06:11 +0000

You just saved my life, i had been banging my head on the wall and cursing Microsoft !

Thanks,