View Full Version : Transparent PNG in IE (as a background image). Problems.

05-01-2006, 03:47 AM

I have a webiste which contains two iframes, linked to a semi-transaparent background image in their CSS file. It works beautifally in FF, however, IE won't accept my png's transparency, giving me ugly soli gray background.

This is the website: Pondicherry (http://www.pondicherries.com)

In the css linked to the files that load inside the iframes, I've added this bit:

background-color: transparent;
font:"Times New Roman";
color: #CCCCCC;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/black.png');

However, the AlphaImageLoader filter won't give me full transparency, and it will do it only for the area where there's text. It also respects the padding for the iframe, which leaves it with the solid grey border. (You can see it in the site)

I know I could fix this if it were an image (not a background image) by defining it's width and height with a class tag, but I don't know how to give the background image this properties for the filter to read them.

MANY MANY thanks to any help, my mind is now boggled from trying to fix this and not being able to.

(I've most certainly signed the petition (http://www.petitiononline.com/msiepng/) for full PNG support in IE!!) :thumbsup:

05-01-2006, 04:09 AM
I'm not sure what that website's supposed to look like but it appears as a mess in both Internet Explorer 6 and Firefox 1.5.

In answer to your query, it isn't possible to display background PNG transparency in Internet Explorer for background images. Microsoft's CSS filters only work on actual images (i.e., img) and background images don't apply. Internet Explorer 7, currently in beta 2, is supposed to support PNG-24 transparency however, I believe.

05-01-2006, 04:15 AM
Thanks, Arbitrator!

Unless you're on something smaller than 1024x768, it should look fine in FF 1.5. (It does in mine, at least)

So then I'd have to manually add page by page the image with the filtered class? (CSS has made me lazy). How would I avoid the padding issue for the iframe?

ETA: This (http://img.photobucket.com/albums/v455/marianab/screen1.jpg) and this (http://img.photobucket.com/albums/v455/marianab/screen2.jpg) is how it's supposed to look.

05-01-2006, 04:26 AM


have look at those two posts. I covered some observations that may help you out some.

The problem with IE is this...

having a png with the filter will set above any link you use in IE. Meaning the filtered png will set above your links making them useless in IE. you can do some crazy layering and opacity stuff for IE though with some trickery. Opera doesn't support it so you can feed it pngs as with FF.

Another issue is this:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/black.png');

having both the the filter and the css background in the styling makes IE choke. The background rule will overrule the filter as it comes last and your left with a png image which IE doesn't understand to make transparent.

And like Arbitrator said...it looks messed up (albeit in different ways) in both FF and IE to me.

05-01-2006, 04:29 AM
My resolution is 1280×1024 and I see a bunch of blank area to the left on my screen and some mis-aligned content and layout to the right on my screen. In Firefox, the black box covers the all but the top of the gray box and the menu seems to be leaking out the top. In Internet Explorer the gray box appears on top but now there's a white box in the middle of the screen.

05-01-2006, 04:36 AM
Here's your page as I see it:
http://i10.photobucket.com/albums/a117/PLGaries/pondicherry.png (http://s10.photobucket.com/albums/a117/PLGaries/?action=view&current=pondicherry.png)

Here's a page with a script that allows you to filter all PNGs on your page (not background images) for Internet Explorer:

05-01-2006, 04:46 AM
Oh boy it sounds bad...

I've re-uploaded the main files, perhaps I messed it up when trying to fix it.

:confused: Why would it look different in different Firefoxes?

ETA: I've switched to your resolution and it does look like that. Meh, now I have to fix *that*. Browsers and resolution should so be universal.

Thanks a bunch!
(I think I'll just scratch the background image for the main iframe and IE users will have to stick to the solid gray on the left iframe)

05-02-2006, 02:38 AM
try this