homepage Welcome to WebmasterWorld Guest from 204.236.254.124
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
PNG Transparency Problems in IE
Graphixx




msg:3046091
 8:13 pm on Aug 14, 2006 (gmt 0)

Hello there!

I have a problem to get transparency to work ok in IE.
Anyone have any idea to fix it correct?

I have attached pictures of it, in Firefox it works out perfect but in IE its just plain color.
The light brown color you see in IE is a .PNG image.And its floating over the background image. As you can see the transparency is perfect in Firefox

<snip>

Any suggestions on how to fix it?

Regards

Graphixx

[edited by: encyclo at 10:05 pm (utc) on Aug. 14, 2006]
[edit reason]
[1][edit reason] no screenshot links please, see forum charter [/edit]
[/edit][/1]

 

tedster




msg:3046435
 2:34 am on Aug 15, 2006 (gmt 0)

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.

ineedmoney




msg:3046467
 3:02 am on Aug 15, 2006 (gmt 0)

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

Fotiman




msg:3047165
 4:37 pm on Aug 15, 2006 (gmt 0)


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).

tedster




msg:3047259
 5:23 pm on Aug 15, 2006 (gmt 0)

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.

tedster




msg:3047270
 5:28 pm on Aug 15, 2006 (gmt 0)

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


Robin_reala




msg:3047426
 6:56 pm on Aug 15, 2006 (gmt 0)

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.

tedster




msg:3047457
 7:20 pm on Aug 15, 2006 (gmt 0)

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.

Fotiman




msg:3047529
 8:06 pm on Aug 15, 2006 (gmt 0)

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.

Robin_reala




msg:3047555
 8:19 pm on Aug 15, 2006 (gmt 0)

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.

directrix




msg:3048603
 3:07 pm on Aug 16, 2006 (gmt 0)

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]

MatthewHSE




msg:3049044
 8:42 pm on Aug 16, 2006 (gmt 0)

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

seoArt




msg:3049304
 1:29 am on Aug 17, 2006 (gmt 0)

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.

Hanu




msg:3049440
 6:18 am on Aug 17, 2006 (gmt 0)

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]

Robin_reala




msg:3049453
 6:48 am on Aug 17, 2006 (gmt 0)

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.

nanotopia




msg:3049956
 2:11 pm on Aug 17, 2006 (gmt 0)

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.

seoArt




msg:3049962
 2:16 pm on Aug 17, 2006 (gmt 0)

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?

Robin_reala




msg:3050052
 3:19 pm on Aug 17, 2006 (gmt 0)

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.

garann




msg:3050324
 6:12 pm on Aug 17, 2006 (gmt 0)

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

Robin_reala




msg:3050684
 10:00 pm on Aug 17, 2006 (gmt 0)

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.

garann




msg:3050702
 10:12 pm on Aug 17, 2006 (gmt 0)

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

cuce




msg:3051870
 5:18 pm on Aug 18, 2006 (gmt 0)

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.

natto




msg:3053379
 10:44 am on Aug 20, 2006 (gmt 0)

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.

Robin_reala




msg:3053523
 3:25 pm on Aug 20, 2006 (gmt 0)

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

whoisgregg




msg:3053548
 3:51 pm on Aug 20, 2006 (gmt 0)

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.

Hester




msg:3054217
 10:13 am on Aug 21, 2006 (gmt 0)

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.

Robin_reala




msg:3054294
 12:16 pm on Aug 21, 2006 (gmt 0)

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!

natto




msg:3054912
 8:26 pm on Aug 21, 2006 (gmt 0)

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.

Robin_reala




msg:3054952
 8:59 pm on Aug 21, 2006 (gmt 0)

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?

Graphixx




msg:3065442
 8:34 am on Aug 30, 2006 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved