Hey all, I'm developing a site for a client using dreamweaver and its the first time i've actually used .png files on a site. When I view it (http://www.chastagi.com/testing.html) with firefox, the png backgrounds and such are transparent and work fine, but when you view it in IE the backgrounds show up as pure white. I was informed that you can change this but im not sure where or how. Please assist. Thanks (also let me know what you think of the design if you like and im interested in load times,etc)

Thanks,

For the background of the page or the background image of a div/table cell etc, you can give it the CSS property:

{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='image', src='images/pics6.png'); }

For an img tag, do the same, but replace the actual image with an entirely transparent gif image (or 8-bit transparent PNG which ie does support).

Have a look at the photo gallery page on my website for an example of this. Each gallery thumbnail is a png image - have a look at the HTML source for the page and you'll see the CSS involved and the transparent image.
Make sure you do this with ie or else my site will detect you are using FF and give you a normal set of png images!

Thanks much, i'll work on it asap and shoot any more questions this way.

IE doesn't handle png trasparency at all. There is a fix (javascript) for it here

I'd also heard about the javascript method and have seen it used. Bear in mind some people might have JS switched off. The css above works fine although it is very IE specific. My website has pngs all over the place and looks fine in IE.

My site also uses lots of alpha transparent PNGs. ( www.inoxia.co.uk )
I use a script called Sleight (google it). I use server side browser sniffing to dish it (and the relevant CSS Files) out to the right browsers.

Been using IE7 recently and it supports alpha transparent PNGs very well