IE6 (& below) and Alpha PNGs

SooTyLaD · 24 Aug 2006 at 06:23

hey peeps...

i am working on a web page and i've used png images with alpha transparencys (cuz i bloody love em)...

now, as opposed to downgrading the images when i come to upload the final project... is there a hack i can put into the code so that crappy browsers can see the images like i do in firefox (i.e. with all the juicy transparency and all that)

pleeeease tell me there is a way, i hate having to accomodate for backwards people :rolleyes:

iCraig · 24 Aug 2006 at 09:16

PNGFix?

Augmented · 24 Aug 2006 at 09:30

A PHP-based solution, which also illustrates the AlphaImageLoader filter which you can use to enable alpha transparency from your CSS (I generally use the latter).

SooTyLaD · 24 Aug 2006 at 17:24

Augmented said:
A PHP-based solution, which also illustrates the AlphaImageLoader filter which you can use to enable alpha transparency from your CSS (I generally use the latter).

sorry matey do you mean on that page there is also a CSS based solution as opposed to the PHP one? if so that would be a lot better but i cant find it... is that what you meant?

and Augmented: what do you reckon to that dean edwards IE7 solution? worth putting on or does it cause problems?

Augmented · 24 Aug 2006 at 22:04

QuiKsiLVeR said:
sorry matey do you mean on that page there is also a CSS based solution as opposed to the PHP one? if so that would be a lot better but i cant find it... is that what you meant?

Yes. It's the manual way of doing what the javascript iCraig posted does. IE has a proprietary filter property in its implementation of CSS, which allows you to load a PNG image with alpha channel using the 'AlphaImageLoader' filter.
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

Code:

/* for supporting browsers */
#foo {
width: 100px;
height: 100px;
background: #fff url(/image.png) no-repeat top left;}

/* for IE 5.5+ */
#foo {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale');}

You'll need to use your preferred method for supplying that second rule only to IE.

and Augmented: what do you reckon to that dean edwards IE7 solution? worth putting on or does it cause problems?

Never used it myself as I've not really seen the need when you can just add in a few workaround rules in a separate stylesheet for IE. That way you don't have to rely on the user both having JS enabled and waiting for all the scripts to download in order that the site doesn't completely fall over.

SooTyLaD · 24 Aug 2006 at 22:22

oh ok, thanks very much

with that filter... would you mind telling me your "preferred method" as i'm not really up on such things :rolleyes:

cheers again bud

Augmented · 24 Aug 2006 at 22:54

I prefer to serve a separate, additional, stylesheet to IE6 using conditional comments:

Code:

<head>
 <title>Title</title>

 <link rel="stylesheet" href="for-all-browsers.css" type="text/css" />
[color=yellow] <!--[if lte IE 6]>
   <link rel="stylesheet" href="just-for-ie.css" type="text/css" />
 <![endif]-->
[/color]
</head>

I like to do it this way as it keeps the main stylesheet free of hacks, invalid CSS (like the filter property) and workarounds.

All browsers except IE consider the conditional comments as regular HTML comment i.e. they ignore that stylesheet link completely.