Transparent png images appear without the transparent shadow in IE6.

**petroczi** · Jul 31, 2009 13:27

Hi,

I'm making the instruction manual for a program and want to use images of pushpins with gradient shadow effects to spruce things up.. The thing is that I just cannot make my png 8 -alpha transparency images - which look exactly as they should in Firefox - to have ANY shadow! Of course, I have been using the right filter, but only the bare png images appear without any shadow, whatever I do. Can you tell what I do wrong?

In my css I address the size, the positioning and the appearance of each "pin" separately like:

Code:

*.pushpin{
    width:90px;
    height: 100px;
    position: absolute;
    z-index:1000;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/pushpins/red_down.png', sizingMethod='scale');
}

/* For the size*/


*.screenshot *.top_left{
    top:60px;
    left:0;
}

/* To determine a certain position*/


/*****************************************************************************

And the double declaration to handle IE6 apart from the normal world..*/



*.red_down{
    background:transparent url("../images/pushpins/red_down.png") no-repeat scroll !important;
}
*.red_down{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/pushpins/red_down.png");
}

And in my HTML I write divs in the proper places - within relatively posisitioned containers - like:
<div class="pushpin bottom_right red_down"></div>

Please, find included one of these "pins".

I have been using Fireworks MX, because I bought it in a bundle with Dreamweaver.

I will attach the native png Fireworks file, too.
Could you tell if this is a css or an image exporting issue?

**c2uk** · Jul 31, 2009 13:44

please enclose your code in, well at least in [ code ] - makes it that much easier.

And I'm just wondering, is it really still necessary to get everything right for IE6?

**petroczi** · Aug 1, 2009 00:52

Hi,

Here you will find the graphic subset of the work-in-progress page for the instruction booklet -without any navigation, javascript, or interactivity, so you can just see that the png images cast the intended semi -transparent shadow.. in Firefox.
To answer you question about the need to support IE6 at all: I far would have gladly forgotten about IE6 completelly, because it causes at least as much trouble for me as a javascript programmer as it does to css designers and - as it seems - to graphic experts, too.
The only reason I am forced to support this ****** browser is that the system administrators at large organisations like CIB BANK and the market leader electrical company in Hungary still have this *** installed on all of their colleagues' laptops and on all the office computers!! This is really shocking, believe me, but something I just cannot change. Anyway, there was a similar discussion about IE6 support in one of sitepoint's newsletters recently with a similar conclusion..

http://www.interangol.hu

**petroczi** · Aug 1, 2009 01:35

I have just read the thread about "Using png in Fireworks" and I learned that with png8 export I can: 1.) make the standard browsers show partial transparency correctly. Great.
2.) IE6 will blend any semi-transparent pixels into the background color - in my case this is obviously transparent, so what I was actually complaining about - the lack of any shadow- is the best possible outcome I can achieve! Gosh! Had I known about this fact earlier I would have fallen back to using alternate gifs in IE6.
3.) Why doesn't any discussion of png images start with this one sentence: "You can never have partial transparency in png images with IE6 doesn't matter what filter you try using. The best you can do is substituting png-s with gifs, or use the png8 export format to make the semi-transparent parts fully transparent. In this way you will, at least, avoid having those ugly plain gray halos where the semi-transparent parts should appear."

**c2uk** · Aug 1, 2009 02:15

As I said before, why do people still try to get everything perfect for IE6? How many of your users are still on that out-dated piece of junk?

**petroczi** · Aug 1, 2009 05:43

This is an English educational site with business people as the target audience so it must be a big concern for me how the site looks and works in IE6 if there is still this common wide- spread corporate policy that keeps this obsolete fossile alive. Blame the system admins for their lazyness or carelessness.

**queen4** · Aug 14, 2009 00:03

Hey, here IE 6 won't support transparent png images, why not just use gif, which is much more compatible, almost to any browers.

And besides that, gif takes much space than png.