PNG Transparency Issue

[yakabod]

I followed this:

 

http://msdn2.microsoft.com/en-us/library/ms532920.aspx

 

It works great on IE as stated but going in firefox or opera, my image disappears.  Why is that?

 

I used to have the image in my css stylesheet as a background but removed it because of the PNG Transparency.  So I made the changes from that link above and as I said earlier, it works great in IE but firefox and opera the image does not show. So, I go back to the css stylesheet and add back the background code and checking firefox and opera it works great, then again going to IE it has the grayscale. 

 

Is there a way to not show the css stylesheet code on IE, but have the alphaimageloader visible for IE? 

 

Thank you.

[bronzemonkey]

You need to use a conditional stylesheet for IE so that the browsers supporting png transparency work properly while IE falls back on that horrible alphaimageloader. Take all the code needed to get the alphaimageloader working and stick it in a separate stylesheet (e.g. called ie.css) that you link to in the head of your document, like this:

 

<!--[if lte IE 6]>
<link rel="stylesheet" media="screen" type="text/css" href="/ie.css" />
<![endif]-->

 

The lte means "less than or equal to". You can see more about conditional comments here - http://msdn2.microsoft.com/en-us/library/ms537512.aspx

 

But where possible avoid using images that require semi-transparent areas. Often you can just use a jpg/gif with the transparent effect but no actual transparency being required by the browser. Or, if you have Fireworks, you can use png-8 to get around the problem of transparency in lte IE6 altogether - http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=37#5

[ToonMariner]

i use the iepngfix in conjunction with the conditional comment.

 

put the iepng fix stuff in an ie6 style sheet...

[yakabod]

Anyone with Firefox please convert my image to PNG-8?  I tried with photoshop cs2 but it's not working.

[ToonMariner]

png-24 i think is what you need...

 

are you using save as or save for web??? the latter gives you all teh options you'll need.

[bronzemonkey]

ToonMariner, PNG-24 will come up as a grey box in IE6 if the image uses alpha-transparencies. To avoid using all the IE proprietary crap needed for transparencies, you can use Fireworks to save the image in the PNG-8 format with alpha-transparency enabled. This will let Firefox, Opera, Safari, and IE7 display the semi-transparent parts of the image while IE6 simply ignores them but displays all the fully opaque parts. The is suitable for the vast majority of uses of semi-transparent images - IE6 users won't even realise they are missing out on something

 

The SitePoint article tells you everything you need to know.

[ToonMariner]

Apologies - I thought the partial transparency thing was the desired effect.  I don't like the proprietary crap either but when it comes to ie6 i fear there is little choice...