IE does not support 24-bit alpha transparency on png images, only binary transparency the same as a gif image uses. IE 7 is supposed to offer this support (finally) but if this is the source of your troubles, then that's no help to you now.

The only approach I know of, if indeed this is the issue for you, is to go back to the image source files and use 8-bit PNG.

use a gif with a stroke the same color as the background of what it goes over, or a jpg with the same background color as what you wish it to go over. png's do look alot better, but like it has been said, no support

The only approach I know of, if indeed this is the issue for you, is to go back to the image source files and use 8-bit PNG.

You mean GIF, right? IE does not support transparent PNGs of any kind, to my knowledge (whichout using a hack of some form).

You mean GIF, right?

A GIF will work, but I did mean PNG. I just did a test (no IE hacks or helper apps) and can confirm that IE6 definitely supports transparency in at least some PNG-8 images. Just not full alpha transparency in PNG-24 images. PNG-8 often gives sightly better compression than GIF, and that's why I mentioned the option.

Digging a bit further, I see that it is possible to create a PNG-8 image that IE does not support. Here's a test page for various flavors of PNG images, and IE will choke on the bottom 4 PNG-8 images:

[libpng.org...]

I'm still not clear on what the trouble is with these. The page says:

All of these images are interlaced, have transparency, and should be rendered with the same green background as the page. If the images have obvious rectangular borders (due to the color specified in the bKGD chunk), the browser is broken... These images are quarter-scale, interlaced, RGBA-palette (8-bit) versions of the original 32-bit RGBA images; each is between 35k and 70k... The conversion to 8-bit palette mode was accomplished by means of modified versions of some of the NetPBM tools.

A little more information on that "bottom four" -- it looks like libpng.org is't 100% sure either (my italics below.)

Internet Explorer [Microsoft] (Win32, Solaris/X, HP-UX/X) - version 4.0b1 and later; read-only; full alpha support as of version 7.0b1 (screenshots), but broken alpha support in earlier versions;1

1. simple transparency only, with bad threshold for transparency vs. opacity, and only for palette images; completely fails to render some transparent palette images (e.g., bottom four here), apparently due to nearly-but-not-quite-opaque alpha values; non-palette images are rendered fully opaque against a light gray background;

[libpng.org...]

I've never had any problems in IE with transparent 8 bit PNGs (where the transparency is a palette entry). It's true though that under normal circumstances IEs version 6 and under on Windows don't support 32 bit alpha transparent PNGs. As an aside, to the best of my knowledge a 24bit PNG can't have transparency as it's not palettised and is split into three 8bit colour components (red, green, and blue). A 32 bit PNG adds an extra 8 bit alpha channel which allows translucency.

So how to be get alpha PNG support in IE? Well, it turns out that IE can farm images out to DirectX to be applied almost as a texture to the webpage. The way the MS previously recommended was to create a blank gif of the right size and apply the alpha transparent PNG via the use of their 'filter' system. This unfortunately breaks stuff for other browsers which can support alpha PNGs (i.e. anything newer than Netscape 4.0). Luckily there's a now famous 'behavior' that'll fix this automatically for you. If you search the web for 'png behavior' you'll find it easily enough. It's a plug and play solution that finds PNGs in your page and runs them through the filter system automatically.

to the best of my knowledge a 24bit PNG can't have transparency as it's not palettised

Thanks for the precision, Robin -- and I'm pretty sure you've got it right.

Since alpha transparency in a truecolor image (RGB) is created by adding an alpha channel to a PNG-24 image (making it RGBA) there are many pages on the web that simply call it a PNG-24 image with transparency. I fell into a superficial understanding.

This might be heading off topic slightly, but how do you create a transparent png? If they work in IE, I'm all for using them over GIFs, but I really have no clue how to create one.

I'd be interested to know how people do this with the following tools:
Photoshop
Gimp

Thanks.

I believe you can export alpha PNGs from photoshop using image ready? Personally I use Fireworks as I find it much better for web stuff. In that it's easy to create alpha stuff. For example, if I wanted you make a button with rounded antialiased corners that'd site on any background (a common application) I'd drag out a box, set the corners to rounded, select the border to be antialiased, then just export having set it to PNG-32. Easy enough. Another common use would be alpha gradients. For example, if I wanted a client to easily be able to change photos in the masthead of site but still wanted a professional look I might place a layer with the strapline partially over the image using absolute positioning then set the back ground to be a gentle alpha fade down to the photo.

An important thing to note here is that Photoshop's PNG output is absolutely atrocious in terms of file size. Fireworks is much better but still not perfect. It's always worth running files through a compressor (I use OptiPNG but PNGCrush is fine as well) before uploading. This doesn't remove any quality - simply organises the chunks in a more efficient way. I can usually get a 10% improvement in filesize from Fireworks with this, maybe 50% on Photoshop's output.

FYI, there are other potential problems with PNG images, such as that they may not display at all in IE.

See [libpng.org...]

<edit reason - offer the link>

[edited by: tedster at 3:11 pm (utc) on Aug. 16, 2006]

I've had good results with this script [koivi.com].

I never use png's in pages. Use Fireworks, and if you absolutely need a 24 bit graphic with transparency there's almost always a way you can work around it by integrating the graphic into the page in a different way.

1) Any 24-bit PNGs can have 256 levels of transparency via an additional 8-bit alpha channel. Most modern browsers support PNG transparency.

2) Internet Explorer 6 and older do not support that alpha channel and draw (semi-)transparent pixels in a awful greenish color. In IE7 that's fixed [blogs.msdn.com].

3) There is a workaround [homepage.ntlworld.com] for PNG transparency available for IE5.5 and up. It's ugly, it uses JavaScript and an proprietary AlphaImageLoader. The fix does not work for PNG CSS background images.

[edited by: Hanu at 6:24 am (utc) on Aug. 17, 2006]

seoArt: sometimes there isn't. A concrete example - recently I had a design that called for antialiased rounded buttons that could sit on any of 12 different colours, with more in the pipeline. I would have had to make up 12 different styles of buttons (one for each styles). Alternatively I just made one 32-bit alpha PNG and it all worked fine.

MatthewHSE: I've had good results with this script [koivi.com].

I've tried pretty much every solution and that one is the best. Especially since it handles both images and CSS background images, and it runs server side, so it's quick.

Robin_reala

"seoArt: sometimes there isn't. A concrete example - recently I had a design that called for antialiased rounded buttons that could sit on any of 12 different colours, with more in the pipeline. I would have had to make up 12 different styles of buttons (one for each styles). Alternatively I just made one 32-bit alpha PNG and it all worked fine. "

You just described an alternate way of doing it - making 12 different styles of buttons. How long would that take?

Not very long, but it's just extra hassle. And what if you don't control the styles these have to sit on?

OK, another example that I've done recently. A layout where the centered content box had a drop shadow over a background image. This would have been impossible without an alpha channel.

I use transparent 24-bit PNGs all over the place, and I'm a little confused by this discussion. (And worried about my existing code!)

Is there a problem with this method in IE? Does it not work in certain browsers?

myElement { 
width: 97px; 
height: 26px; 
background /**/: transparent url(images/tiara_up.png) top left no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 
(src='images/tiara_up.png',sizingMethod='scale'); 
}

Sorry if I'm missing the point...

That looks mostly fine, but a) you're declaring transparent which is the default colour and b) it'll fail in windows IEs less than 6. Your /**/ comment hack is purely to hide from IE6.

Weird! I thought I'd tested it in IE5. I guess lte IE5 needs its own stylesheet... Thanks. :)

Hey this is my solution here, seems to work quite well for IE6 and Firefox and safari at least.

<?php $msie='/msie\s(5\.[5-9]¦[6]\.[0-9]*).*(win)/i'; if(!isset($_SERVER['HTTP_USER_AGENT']) ¦¦!preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ¦¦ preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT'])){echo('
//outputs the following in Other Browsers
<img src="assets/images/latestnews.png" alt="latest news" />

');}else{echo('
//outputs the following in IE
<img src="assets/images/home/spacer.png" alt="product information" style="width: 158px; height: 28px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/assets/images/latestnews.png\', sizingMethod=scale);" />

');}?>

Kind of chunky, but it's nice if used sparingly.

Have you not enountered the Windows SP2 warning when you use the AlphaImageLoader technique? IE6 will flag the ActiveX component as potentially maliscious content and will warn the user about it - which can be quite worrysome to the average person.

Um, no I hadn't! That's worrying. Presumably that doesn't happen on a default install?

I've had good results with this script [koivi.com].

It bears repeating... For me, that script was the last stop on a long road of attempts at a simple drop-in solution for alpha transparent PNGs. I'm not affiliated with the site, but I also recommend it.

I don't even have to think about PNG transparency anymore.

A layout where the centered content box had a drop shadow over a background image. This would have been impossible without an alpha channel.

Not if the background was fixed. You could just place a jpg of the result instead.

True, but only if the body background was centered as well. Which I suppose I could have done :) OK, here's another example I've used on a live site - bars at the top and bottom of a scrolling ticker to provide a nice fade-out effect. Can't do that with a jpg!

Robin - yes it does happen on a default install. I have a fresh install of Windows XP Media Centre SP2 with the latest patches and I get that error. Still, always test it yourself.

Well that's the thing - I have been, and on fresh installs as well. Which is why I was rather worried about your warning. Can anyone else confirm/deny this?

Instead of using the PNG as i have done.What if i drop the PNG and do it in css,would that be possible?

[edited by: Graphixx at 8:40 am (utc) on Aug. 30, 2006]