homepage Welcome to WebmasterWorld Guest from 54.237.213.31
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Transparent PNGs in IE6
Any way to make this work?
jessicap

5+ Year Member



 
Msg#: 4039502 posted 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

WebmasterWorld Senior Member demaestro us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 7:47 am on Dec 11, 2009 (gmt 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!

swa66

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



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 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

5+ Year Member



 
Msg#: 4039502 posted 2:10 pm on Dec 21, 2009 (gmt 0)

Thank you :0)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved