CSS, PNG, & IE Conditional Comments

[tonyh]

I know this question has been asked a billion times. I have searched the site and did find a clean solution a while ago, but since haven't found it. When I mean clean, I mean using the Alpha Filter in CSS without the use of javascript, behaviours, or server side replacements.

Here's a hack to get it to work:

/* This would be your normal CSS file, viewable by Internet Explorer and
* non-IE browsers. */
#someDIV {
background: transparent url(path/to/bg.png) repeat-y scroll 0 0;
}

The above code will get things to work for Gecko (Firefox, Mozilla, Netscape 7+, etc), KHTML (Safari, Omniweb, etc) and Trident (Internet Explorer 7 only) browsers.

Insert the following snippet of code into the HEAD of every HTML document in which you want 24-bit transparent PNGs:

<!--[if IE]>
<style type="text/css" media="screen">
@import "/css/Fix_Internet_Explorer.css";
</style>
<![endif]-->

Now in the aptly named Fix_Internet_Explorer.css file:

/* IE7 does not support the star-html hack anymore, so this is ignored by IE7: */
* html #someDIV {
background: transparent none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/bg.png',sizingMethod='scale');
}

And that's it.

Since IE7 implements PNG opacity correctly, despite it's color rendering issue, I would like to implement:

.png {
<!--[if lt IE 7]>
background: transparent none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/bg.png',sizingMethod='scale');
<![endif]-->
}

<img class="png" src="image.png" />


I found an article (http://www.howtocreate.co.uk/alpha.html) that is similar to what I'm trying, but this solution requires additional IDs:

However, this would need to contain one CSS rule for each image, as the filter needs to be different for each image. For this reason, I assign an ID to each span, and then use the ID to set the filter.

Which I'd like to avoid. Also, I realize toicontien's solution is for backgrounds, so the code in my example may not work, and I'd like to avoid a second IE only style sheet import as well. Ultimately I would like to create one class (or one class for img and another for background) that will work with all scenarios regardless of image size. Is this possible?

[_Aerospace_Eng_]

For the filter to even work a width and height need to be set for each image so you would need to make a class or id for each image so I don't see how doing what you want will be possible.

[tonyh]

sizingMethod='scale'

I thought this was suppose to take care of that issue. Of course there would be a width and hight declared in the <img /> tag. So wouldn't the scale parameter utilize those dimensions?