Transparent PNGs in IE6

Forum Moderators: not2easy

Message Too Old, No Replies

Transparent PNGs in IE6

Any way to make this work?

jessicap

3:47 pm on Dec 8, 2009 (gmt 0)

I have created a partially transparent PNG image (alpha-channel transparency) that I would like to use. It's working in all the browsers (including IE8), but not in IE6. The transparent areas just turn white in IE6. Does anyone know a way to solve this problem?

I found a web page that suggests AlphaImageLoader by using the following code:

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

It didn't work for me, but then again, I may have incorporated it wrong as the site didn't clearly tell me where to place it.

This is my current code:

.post .title {
height: 55px;
margin-bottom: 3px;
padding: 19px 0px 2px 20px;
background: url(images/title_header.png) no-repeat left top;
color: #FFFFFF;
}

Any ideas how I can manipulate this situation to work in IE6?

Demaestro

5:16 pm on Dec 8, 2009 (gmt 0)

Swapping them with gifs may be your only choice if you want them to work in IE6

jessicap

7:38 pm on Dec 8, 2009 (gmt 0)

My image slowly fades creating partial transparency along the way. The last I knew GIFs don't allow for that (it's either transparent or solid)....I need the in-between too. Is there a way to get GIFs to do that?

StoutFiles

8:08 pm on Dec 8, 2009 (gmt 0)

AlphaImageLoader is a bad idea altogether.

Just put in a conditional comment for IE6 and not have the image fade in. The amount of people who use IE6 is quite small and getting smaller everyday, it's not worth the effort to make it work perfectly.

jessicap

12:18 am on Dec 9, 2009 (gmt 0)

Well, that's not very encouraging...lol. Let's say I was willing to put in the extra effort, does anyone know what it requires? :0)

jetboy

7:38 pm on Dec 10, 2009 (gmt 0)

AlphaImageLoader's fine in small doses, but people tend to overuse it as part of a script like PNGfix, and get in a complete mess.

.post, .title {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/title_header.png');
}

will do the business for you, but make sure to put it inside a conditional comment so it'll only affect IE5.5 - 6. Later versions don't need it, and IE5 doesn't support it.

jessicap

8:03 pm on Dec 10, 2009 (gmt 0)

What do you mean by "overuse".....I have at least a handful of images that need it on each page as part of the design....would that be overusing?

jetboy

8:53 pm on Dec 10, 2009 (gmt 0)

*If* you're doing it manually as I've shown you'll be fine. It'll only affect IE6 (and 5.5). Some of the PNG transparency JavaScript fixes out there are a little less precise, and can slow down page load speed.

I've used a dozen or so instances on a page with no noticeable slowdown, but your best bet is to do some testing and see for yourself.

jessicap

5:27 am on Dec 11, 2009 (gmt 0)

Works wonderfully in IE6, but the images have completely disappeared in Firefox. Is that expected?

Here's the code I entered:

.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sm_title_header.png');
color: #FFFFFF;
}

Oh, btw:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

jetboy

7:47 am on Dec 11, 2009 (gmt 0)

Conditional comment:

Put the CSS I gave you in ie55_6.css only. You only want IE 5.5 and 6 to see this code or ... well, you've seen what happens!

swa66

1:53 pm on Dec 11, 2009 (gmt 0)

Works wonderfully in IE6, but the images have completely disappeared in Firefox. Is that expected?

Yes.

"filter" is a non-standard setting. Any compliant browsers should ignore the line and that would mean in your example that there's no image referenced at all.
You need to keep your background-image statement for all the complaint browsers.

Try validating your CSS: it'll flag this as a syntax error.

The solution is as indicated above to use conditional comments to feed it only as a workaround for the browsers made to be not compliant with the standards.

jessicap

4:34 pm on Dec 11, 2009 (gmt 0)

Ok, I made the changes(to my understanding), and all is working well with all browsers again, except IE6. I'm seeing partial success with IE6. Some of the images are working perfectly and others are not showing at all.

I'm not sure if this helps, but the following code shows the images that are NOT showing up in the browser:

#wrapper {background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/top_curly.png') center top fixed no-repeat;
}

#wrapperb {background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottom_curly.png') right bottom no-repeat;
}

#sidebar li {
margin-bottom: 30px;
padding: 0;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg2.png') no-repeat left bottom;
}

#searchform div {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg2.png') no-repeat left bottom;
padding: 0px 10px 10px 10px;
margin-bottom: 30px;
line-height: 1;
}

jessicap

2:10 pm on Dec 21, 2009 (gmt 0)

Thank you :0)