View Full Version : Is there a PNG fix for IE that actually works?

05-17-2007, 03:24 PM
Hi guys,

I did a search here but I think my choice of words was too vague.

I have a png problem. I've searched online for many answers, but none of them seem to work, or clearly I'm doing something wrong. I visited a few sites that were using some of the popular alphaloaderthingy, and in IE6, all of their png images showed very ugly black outlines. So basically this tells me that they dont work, OR is this supposed to happen? I'm very confused lol. Are these "png fixes" supposed to make the png show up the way it should in IE6 like it does in FF and IE7? Or do they just give your transparencies those ugly black edges?

here is an image background I'm trying to use, which of course shows up perfectly in the most recent browsers, but in IE6 it fills the empty space with a basic white color, and if I add any of those supposed "fixes", it makes the edges black. which isn't want I want.


any help??

Thanks :)

05-17-2007, 04:26 PM
Hi and Welcome to the CodingForums Rachielle,

What outlines do you mean? Can you show us those pages?
I’m usually using the CSS filter property to apply a transparent background image to an element. I’ve set up a small test page (http://primacom.net/~k6531190/opacity_test.htm) showing it (ignore the “quote” stuff in the source code, that has been a different test found on mandarindesign.com). And the black outline around the images belong to the images by the way.

Also, I’ve recently designed another website (http://black-coffee.info) using this method (see menu dropdowns). I had some extensive “hacking” to do in order to get this to work.

Note that IE doesn’t apply transparency to an element in the source code but it’s kinda creating a new secret element with transparency. There’s some interesting reading: http://www.satzansatz.de/cssd/tmp/alphatransparency.html

Also note that IE can display transparency but only to a certain extent (percentage). I haven’t checked in detail but it will just make everything below like 20% opacity (= almost transparent) completely transparent, resulting in a less smooth transition than modern browsers.

05-17-2007, 04:31 PM
background:url('test.png'); width:150px; height:55px;
/* \ */
* html #regular_logo
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
/* */

Source: http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/