Comments on: Cross Browser PNG Transparency: Part 2

By: Julie Hathaway

Julie Hathaway — Sat, 22 Mar 2008 15:55:29 +0000

However, I believe there is a typo in the conditional comment. The last [endif] is missing a hyphen.

By: Julie Hathaway

Julie Hathaway — Sat, 22 Mar 2008 14:00:57 +0000

Fabulous — it worked perfectly on the first try!

Thank you thank you thank you!

By: Nate

Nate — Thu, 13 Mar 2008 07:53:47 +0000

I was having some serious DIV'itis and, while I got my page to markup, what a horrid mess for content management. This worked like a charm, at least IE6 has some PNG support even if only proprietary. Thanks for posting and with clear instructions and explanations. A rarity.

By: rob

rob — Fri, 15 Feb 2008 21:24:51 +0000

@baker

It doesn't appear to work.

IE seems to just drop the AlphaImageLoader part entirely.

I didn't exhaustively research it, but I did try a couple of approaches.

Here's a screen shot.

By: karl

karl — Thu, 14 Feb 2008 20:31:26 +0000

Rob,

you solved the issue for me, but possibly not in a manner which any of us envisaged. When I had a look at your example, it displayed as intended in IE6 on my test machine. I looked at the source code of your example then went to my page to check the differences. Upon browsing to the page, it rendered as yours did.

I was confused, until I recalled that IE caches aggressively, and I had actually solved the issue first time I tried the technique you talk about above, but because of caching of the files in question, I was still getting the old page!

The sample I had I had only linked to the css for

Thank you for time and effort - much appreciated, and great to see your technique works.

By: rob

rob — Thu, 14 Feb 2008 18:12:53 +0000

Hrm, interesting. I'll take a look at that today. I have some time I can dedicate to research this week and that's sounds like it will be interesting.

I can't even picture what IE6 would do.

By: baker

baker — Thu, 14 Feb 2008 18:04:34 +0000

Here's one for you - alphaImageLoader AND alpha(opacity) without the PNG looking like crap?

I'm in the midst of researching it, and it seems no one has tried (yet) and there is no documentation anywhere about it…

By: rob

rob — Wed, 13 Feb 2008 04:10:40 +0000

The white in the middle should remain white as long as the image is produced with white in the middle. If that makes sense.

All you're trying to do is have a smooth drop shadow on top of the space ship? that's definitely possible with this technique. You have two sides which will be semi-transparent and then the middle will be solid white, right? That's a perfect candidate for the full cross-browser technique.

the sample I just looked at has background: transparent url(), etc. in the main sheet so I can't really debug what might be happening in IE6, but this would definitely be possible.

In your IE6 specific style declaration you would need something like this:

#content{
background:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://mothership.co.nz/reduction/images/bg.png',sizingMethod='scale');
}

Here it is working (only in ie6 for now- the browsers with PNG support need to be worked with using normal techniques.)

http://www.drunkenfist.com/web/samples/test.html

By: karl

karl — Wed, 13 Feb 2008 03:06:09 +0000

Having worked through this, I don't believe it will function as I intend. The issue is that the background and #content colours are white, so there is little demarcation between them. Running the script makes the whole PNG transparent, including the white in the middle. I guess at this juncture I will look to change the design somewhat (as tempted as I am to use conditional comments and create an entirely different look for IE users only).

By: karl

karl — Tue, 12 Feb 2008 22:59:15 +0000

I have replaced the logo with a PNG with a white background, but the background image of the content div refuses to scale (for me at least).

I have gone over both CSS sheets, as well as the html, and cannot find a reason for this. Frustrating.