Textpattern CMS

#1 2006-05-22 23:35:51

TheWorkingchair.com

Member

Registered: 2006-04-10

Posts: 12

transparency on png files.

This really doesn’t have much to do with textpattern, but I’m designing my website around it so I figured I can ask.

If you go to my website, http://www.theworkingchair.com/ you’ll notice the image in the header “twclogo.png” has a transparent background if you are using firefox. Now for some reason I just get a gray background if I view the page in Explorer. Also if you go to the comic section ( http://www.theworkingchair.com/comics/ ) those png files do the same thing.

Does anyone know what I should do about this? Should I use another format other than png if I need transparent backgrounds?

#2 2006-05-22 23:46:52

Mary

Sock Enthusiast

Registered: 2004-06-27

Posts: 6,236

Re: transparency on png files.

A known problem, with various workarounds: http://google.com/search?q=png+transparency+ie

#3 2006-05-23 02:14:49

NyteOwl

Member

From: Nova Scotia, Canada

Registered: 2005-09-24

Posts: 539

Re: transparency on png files.

Yep: IE doesn’t handle transparency in PNG’s well. IE7 is supposed to be an improvement but I’ll believe it when I see it.

---

Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;

#4 2006-05-23 15:53:57

Ace of Dubs

Member

Registered: 2006-04-17

Posts: 446

Re: transparency on png files.

The only solution is to have a backup image for IE and then hack your CSS so that all browsers except IE load the PNG. Personally I use a transparent GIF, not as pretty but degrades nicely enough. Here is the css

<code>#divID { background: url(img/xyz.png !important; background: url(img/xyz.gif);
}</code>

#5 2006-05-23 21:51:39

whatbrick

Member

From: Texas

Registered: 2006-03-13

Posts: 100

Re: transparency on png files.

This is going to seem extremely picky, but IE (versions below IE7) does handle PNG transparency, if it’s 8-bit transparency like a GIF. What it does not do is render the PNG alpha-channel.

IE7 handles PNG alpha-channels just fine (I believe it because I’ve seen it :).

IE6 (and IE5.5) can handle PNG alpha-channels with an ActiveX filter that can be applied either through javascript, CSS and/or other methods. When using it in CSS, I just throw it in an IE only stylesheet and serve it up using IE conditionals. Works great so far. The CSS validator skips any stylesheets placed in an IE conditional, which is fine with me as those proprietary filters will not validate. The only downside is that if the security level is set to deny ActiveX controls, then no image will appear at all.

The link provided by Mary will provide more information.

---

Do not taunt the Markup Monkey!