CSS hack for PNG transparency not working!

[Pixelateur]

Hey,

I am desperately trying to make a transparent PNG work on this site. I have read the article over at A List Apart on how to do this, but for some reason it fails on my machine (Internet Explorer 6). Can somebody tell me how to fix this?? Thanks, any help is greatly appreciated.

[Paul O'B]

Hi,

For foreground images i would use the pngfix method here.

If you don't want to use that then you could do something like this which works but is a bit overkill.

#banner {
    float: left;
    width: 390px;
    height: 500px;
    background:url(http://www.modeldock.de/images/jens_braun.jpg) no-repeat center center;
}
#banner span{
    float: left;
    width: 390px;
    height: 500px;
    background:url(http://www.modeldock.de/images/frame.png) no-repeat center center;
}
#banner img{visibility:hidden}

IE only code follows:

* html #banner{
background-image:none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/jens_braun.jpg',sizingMethod='image');
}
* html #banner span{
background-image:none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/frame.png',sizingMethod='image');
position:relative;
top:-25px;
left:-5px;
}
* html #badge{
background-image:none;        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/badge.png',sizingMethod='image');
}
* html #badge img{visibility:hidden}

Then the html would have to be like this:

<!-- // header -->
<div id="wrapper">
    <div id="content"> <span id="banner"><span><img src="http://www.modeldock.de/images/jens_braun.jpg" /></span></span> <span id="badge"><img src="http://www.modeldock.de/images/badge.png" /></span>
        <div id="text">

Basically I put the images in the background and used the alpha image filter. The foreground images are hidden but left in place for accessibility etc.

The pngfix method would be neater but read the article thoroughly as it needs to be done properly. However the above method I've shown is working now in IE and Firefox ok.

[Pixelateur]

Wow, this is great, Paul. Thanks a lot. I just left my office, so I can't try this out before Monday, but I'll post some feedback soon. Thanks a bunch!!

[Pixelateur]

Hey Paul,
I went for the solution that you recommended, and it looks better than before, i.e. the PNGs are displayed correctly. However, when I try to open my page in IE6 it seems to take forever for it to load entirely. It seems like the browser gets stuck in a loop or something. Do you know how to fix this?

[Paul O'B]

Hi,

I looked earlier at this but I had to go out but now I look again it seems you have changed the design and it seems to be working ok.

Did you solve the problem?

[Pixelateur]

Hi Paul,

Sorry, I should have let you know.... My client said that he didn't really like the scotch tape after all, so we decided to abandon it in favour of a much easier way.

By the way, I got the transparency effect working in IE, but I used this method. And just when I got it working, my client rang me up...

But at least I know how to make this stuff work. There's another project in the pipeline, where I might need transparent PNGs again. Thanks again for helping.