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

By: richard

richard — Tue, 16 Mar 2010 06:06:51 +0000

hi thanks for this, it is really working.......

By: Bruce

Bruce — Fri, 10 Jul 2009 19:06:58 +0000

Jen, this fix isn't required for Safari or Opera as they are capable of correctly displaying .png images. I'm sorry I have no experience with flash or how flash layers interact with transparent images: your best bet may be to pose this question in a flash-related forum, perhaps after putting some sample code up (preferably a live demo) so that those in the know can best help you?

By: Jen

Jen — Fri, 10 Jul 2009 18:22:01 +0000

Hi, I could use some hlep. I am able to get this to MOSTLY work in IE, but still have an issue with Safari and Opera, so not sure where to go next.

I have a banner that uses a transparent png because of its shape (the left side has 30px graphic that goes below the rest of the banner) and a flash object underneath it in my content section.

I am able to use z-index to get the banner to lay over the flash object and it renders beautifully in FF but not in any other browser.

I believe this is due to the png transparency because IE, Opera, and Safari (PC) appear to be converting the transparent space to white which cover the top of my flash object.

I am now going on 2 days of trying to figure this out and about to lose it! any help is greatly appreciated :)

By: Erick

Erick — Wed, 18 Mar 2009 01:55:56 +0000

You've saved my life. Thank you!

By: Derrick

Derrick — Thu, 27 Nov 2008 19:51:41 +0000

You actually don't need all this code.
all you have to do is apply the MS filter throught your IE only style sheet to divs or classes. Use a conditional statement for this style sheet to hide it.
The trick to make links work inside of divs using the ms filter is this:
The div using the fix MUST have positioning and the parent div CANNOT have positioning. Now your links will work perfectly. You can use absolute or relative positioning.
Other notes: must use PNG 32 (Fireworks), doc type should not matter. Strict might be better.
You not can use PNGs with Alpha. No need for fancy fixes. Microsoft has already done it for you. Here's the official link: http://msdn.microsoft.com/en-us/library/ms532969.aspx

alot of sites make this issue way more complicated with clear gif overlays, etc. there is absolutely no need for this. And don't worry about the whole validatioin thing in your css because you are using a conditional statement for your IE only stylesheet.

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. [...]