Transparent png's in ealier IE versions...

[sking]

Does anyone know of a script or quick fix for the use of transparent png's? I have this new design using several png's w/transparency. It looks great in the latest IE7 but horrible in earlier IE versions. I'm trying to resolve the issue and really need the nice non-rough edges that png's offer.

Is there a script that resolves this problem?

[captain spanky]

img {behavior: url(/pngHack/pngHack.htc);}

[captain spanky]

<!--

PNG Hack

Copyright 2002, Aaron Porter <aaron@javasource.org>

Inspired by Erik Arvidsson's "PNG Behavior" at
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

-->
<public:component>
<public:attach event="onpropertychange" for="element" onEvent="propertyChanged()" />
<script language="JavaScript">

var needHack = needHack();

var transparentImage = "/pngHack/transparent.gif";

pngHack();

function propertyChanged()
{
if (event.propertyName == "src")
pngHack();
}

function pngHack()
{
if (!needHack)
return;

var src = element.src;

if (src.indexOf(transparentImage) != -1)
return; // Already fixed

if (src.indexOf("png") == -1) // There's got to be a better check than this!
{
element.runtimeStyle.filter = "";
return;
}

element.src = transparentImage;
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" + src + "',sizingMethod='scale')";
}

function needHack()
{
var pos = navigator.userAgent.indexOf("MSIE ");

if (pos == -1)
return false;

var version = navigator.userAgent.substring(pos + 5);

return (((version.indexOf("5.5") == 0) || (version.indexOf("6") == 0)) && (navigator.platform == ("Win32")));
}

</script>
</public:component>

[sking]

Wow! That's the quickest response in history! Thanks so much! I'll check it out. :-)

[sking]

Hmmm... Well I believe this would have worked had my images been hard-coded into the html.

Is there a way to make this script work if all my images are being called from an external CSS file?

Here is one example of how I am calling an image from css file with a div tag:
#audio { position:relative; width:184px; height:86px; background: url(../images/default/audio-button2.png) no-repeat;}
#audio a { display:block; width:100%; height:100%; background: url(../images/default/audio-button.png) no-repeat; }
#audio a:hover { background:transparent none;}

Any advise would be much appreciate. :-)

[sking]

Well, I played with the script and I feel as though I'm at a dead end here. :(

Does anyone have any advise of how to utilize this png fix script with css images? I've posted my css code above for review.

Here is the code I'm using to call the image into the html page:
<div id="audio"><a href="sermons.html"></a></div>

Here is the css code:
#audio { position:relative; width:184px; height:86px; background: url(../images/default/audio-button2.png) no-repeat; }
#audio a { display:block; width:100%; height:100%; background: url(../images/default/audio-button.png) no-repeat;}
#audio a:hover { background:transparent none;}

The reason for having all my images and backgrounds in a css files is because I am creating a theme switcher so nothing can be hard coded for this to work.