Transparent PNG in IE6 (AlphaImageLoader)

Question

How can I get the Microsoft.AlphaImageLoader to work??

I am trying the following:

.navHeader
{


    /*Alpha Loader*/

     background-image: none;    
     background:transparent url('../../../../commondata/sharedimages/summary/NavBox_topMiddle.png'); 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../commondata/sharedimages/summary/NavBox_topMiddle.png',sizingMethod='scale');



    text-align: center;
    font-family: Arial, Helvetica, san-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    line-height: 16px;
}

This has no effect on the PNGs (they are not transparent).

Answer 1

I've had so much headache trying to get IE6 PNG support, until I found this: http://www.dillerdesign.com/experiment/DD_belatedPNG/

It's a simple fix, and works well for everything I need. Hopefully it works as well for you!

Answer 2

I think what you're doing is specifying the background image and then applying the filter over the top of that. You need to NOT specify the background image for IE6, and only apply the filter.

Otherwise you get the background image (without PNG transparency) and then you apply the filter over the top of that - effectively showing two PNGs but only the top one is transparent.

Also, double check your src path for the filter - I believe it works it out differently than CSS url paths (i.e the path is relative to the location of the page, not the CSS file)