Welcome to WebmasterWorld Guest from 54.196.214.35

Forum Moderators: not2easy

Message Too Old, No Replies

Transparent PNGs in IE6

Any way to make this work?

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

New User

5+ Year Member

joined:Dec 5, 2009
posts: 22
votes: 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?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2606
votes: 0


Swapping them with gifs may be your only choice if you want them to work in IE6
7:38 pm on Dec 8, 2009 (gmt 0)

New User

5+ Year Member

joined:Dec 5, 2009
posts: 22
votes: 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?
8:08 pm on Dec 8, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:May 6, 2008
posts:2011
votes: 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.

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

New User

5+ Year Member

joined:Dec 5, 2009
posts:22
votes: 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)
7:38 pm on Dec 10, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts: 266
votes: 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.

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

New User

5+ Year Member

joined:Dec 5, 2009
posts:22
votes: 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?
8:53 pm on Dec 10, 2009 (gmt 0)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 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.

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

New User

5+ Year Member

joined:Dec 5, 2009
posts: 22
votes: 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">

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

Full Member

10+ Year Member

joined:Feb 14, 2005
posts:266
votes: 0


Conditional comment:

<!--[if (lt IE 7)&(gte IE 5.5)]><link rel="stylesheet" type="text/css" media="all" href="/css/ie55_6.css" /><![endif]-->

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!

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

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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.

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

New User

5+ Year Member

joined:Dec 5, 2009
posts: 22
votes: 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;
}

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

New User

5+ Year Member

joined:Dec 5, 2009
posts:22
votes: 0


Thank you :0)