Problem rendering PNG with transparent background

The problem is with IE. It can’t display .png files with transparent backgrounds properly. Firefox can handle it just fine.

You can try this script to make IE behave with alpha transparencies in png graphics:

https://youngpup.net/2001/sleight

Some time ago IE had problems with transparency in PNG images. I don’t remember exactly the question right now but I’m sure I solved it reducing the number of colors in the pictures. I reduced the palete to 256 colors or so and IE started managing correctly the transparency.

IE still renders alpha-transparent PNGs incorrectly, and probably will continue to do so until the next version. Using plain transparency will work, but you lose some of the cool effects of having things that fade to transparency based on the color of the element behind it.

I have been researching my butt off on this. I have come across some other references about reducing the colors to get proper rendering. I’ll experiment with it and let you know the results. It would explain why some PNGs render correctly and others not.

Here’s a pretty definitive page on this, as well as a script to “fix” IE:

PNG-24 Alpha Transparency With Microsoft Internet Explorer 5.5 or better (MSIE 5.5+).

I’m using this script on one of my sites, in order to force transparency in IE using the “Taft” theme from Denis at Secret Weapon Labs. Works great, no problems at all.

Ok, I tried changing the colors with no effect. So, I implemented the solution mentioned above with php script. It made the bakground transparent, but, it also has done something with the image. The little white box with the red x now appears. Could you look at it and tell me what to do. I would appreciate your help on this – I started working on this a week ago.
ronpemberton.com

Which are you using? The one kickass gave you the link to or the one from Koivisto?

You don’t need all that PHP code. Use CSS instead. First, make a transparent PNG-8 (or GIF) image, 1px by 1px. Then make your img tag point to it instead:
<img src=”/path/to/your/transparent_pixel.png”>

Now all we need to do is add this in your CSS file:
#headerimg h1 img {
width: 323px;
height: 99px;
background: transparent url("/path/to/your/image") no-repeat;
}
/* IE-win CSS hack \*/
* html #headerimg h1 img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/your/image', sizingMethod='crop');
background-image: none;
}
/* End IE-win */

Just don’t forget to change /path/to/your/image to the correct path of your PNG-24 transparent image.

I’m using the one from Koivisto. And s_g, I will employ your suggestion as well, and see if it works.

thanks

The rendering of true coulor+alpha channel (32 bit bitmap) of PNG images is correctly done only by Firebird/Firefox/Mozilla and Opera 7 browsers. On the contrary, IE6.SP2 is able to render PNG true (16.8 mil, 24 bit) colours “only” without alpha channel transparencies. Otherwise, they are rendered on an unavoidable grey-opaque background. Unfortunately, all the MSIE tricks – or hacks – that have been so far proposed miserably fail on all Win OS platforms. It’s useless to further increase the entropy of the debate on this issue. It seems that the various “treatments” (PHP included) had not been tested sufficiently on IE6.SP2 (! important: the security SP2 for IE5+ and for IE6 have been detrimental on this account, but not all the MS OS are systematically upgraded and patched…). Thus, IE6 can only die, or drastically be changed (hopefully, uh!). Therefore, cross-browser background transparency is limited to 8-bit (256 colours) GIF or PNG images having one (or more) 100% or on-off transparent colours. This can be easily obtained through Fireworks, XaraX, Gimps or PaintShop (and other few nick progs). The resulting GIF and PNG transparent versions of the same image are perfectly superposable and visually equivalent, since the gamma autocorrection of PNG algorith (absent in the GIF one) is also disabled. Since the PNG conversion is not licensed (as the GIF one is) and is able to produce smaller true and 256 colour files (e.g., a 256 col 8.534 Kb GIF becomes a 7.617 Kb PNG), it’s officially recommended by W3C. Conclusion: no solutions or miracles, but mirages (and time-consuming disappointments) for IE6, at least up to now.

I don’t know why you say the solutions don’t work, because obviously the PHP solution proposed by the others works fine – otherwise it wouldn’t have become so popular.

My CSS fix also works perfectly fine, as I tested it on a Windows platform with IE6. So I don’t get why you say that “all the MSIE tricks – or hacks – that have been so far proposed miserably fail on all Win OS platforms”.

“all the MSIE tricks – or hacks – that have been so far proposed miserably fail on all Win OS platforms”. This is an untrue statement. I use win2k and can view sites using any of the above “hacks” in IE6 and all work much better than jaggy indexed transparency gifs, which is your only other option. I consider that to be a qualified success, not a miserable failure. Yes, it would be better if Microsnot got their shee*t together, but . . . they haven’t yet. So these hacks are a reasonable alternative. Is there something wrong with your particular setup maybe that’s causing the failure on your system? I know a lot of people who had early XP and had to SP2 as an afterthought have had all kinds of problems.

I too have no problem viewing the “hacks” with IE and having them display the transparency properly. The Taft theme as mentioned before displays just fine in IE on one of my sites. I’m using XP SP1 (I’m a holdout – so sue me…. I’ll be moving wholesale to linux “one of these days” – speaking of getting shee*t together *sigh*)

It’s not an ideal solution, no. But really, the alternatives are LESS ideal by far….

Hi everyone,
Listen, I am deeply grateful for all the generous assistance you have all given me. Some of the post above, sound like some took it personal or something. It isn’t anyone’s hacks that are the problem – all suggestions are perfectly sound and, throughly supported by many authoritive sources. I am completely new at all of this. Only six months ago did I take up learning XHTML, CSS, PHP, etc., etc.. I try not to bother anyone here with stupid new person questions until I absolutely have no choice.

Now, what started me on this whole png transparency thing was when I installed the Image Headline plug-in from https://www.coldforged.org. An excellent plug-in, I’m sure. I wanted to use it to render my name in certain fonts that emulated the handwriting of famous artist – like Dali and Davinci.

I read something on this site https://koivi.com/ie-png-transparency/ , that believe explains why a php solution wouldn’t work in my case. Php doesn’t work because the plug-in is an external source that produces the image dynamically. The php works best with static image files. Its in his project notes at the very bottom of the page. Otherwise php would work perfectly and is the best solution choice for php tranparency in IE.

In close, please remember that I am a novice that is grateful and, unquestioning of the assistance you all have given me.
Sincerely,
Ron