How are they doing this in IE? (png transparency)

[dannyh]

I can't find any proprietary IE code that allows for transparency which I have seen on some sites. Am I missing it somewhere?

http://tatteredfly.com/

It bugged me for a few minues after looking at this site in FF and then IE to check the transparent header/shadow affects.

Anyone know how they are doing this? I want to learn from it

Thanks

[Tyssen]

Did you look at the source?

<div id="container" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/container.png',sizingMethod='scale');">
<div id="logo" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/logo.png');">
<h1>Tattered Fly</h1>
</div><!-- /#logo -->
<div id="header">
<div id="header_photo" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/detail.png');">&nbsp;</div>
</div><!-- /#header -->

[dannyh]

ahhhh

I didnt suspect it to be inline styles. I dont ever write anything inline so I didnt think to check there.

[LinhGB]

There's also a pngfix.js javascript around that will automatically apply the fix to all PNGs on the page. You can also use IE conditional comment to load it only when it's needed. It's far neater than the above.

[steparths]

This code will allow the different levels of transparency that png supports? I bought some nice icons at www.iconshock.com, but there are some with semi transparent areas. If I try to use gif for my CMS, then I loss some of the best characteristics of the artwork, and batching to bmp takes time...