Hi all,

The site I have done uses transparent PNG's here and there, including the faded sidebars on the main layout.

This site design was coded in strict xhtml, and the design I got back from the designers worked perfectly in IE6 using the png.js fix.

After applying the design to SS, the fix no longer works. I have tried changing the location of the fix files and paths but nada. PNG's are still showing up grey. Some are disappering altogether.

Has anyone successfully applied this fix to Silverstripe, and if so, can you give me directions please? I don't want to have to go through and make everything gifs.

Cheers
Aaron

Here's a png fix for IE6 that works without actually needing a js file, you just put it in the conditional css for IE6...

Used fixes a few times without trouble in SS.

http://www.pluitsolutions.com/2007/11/18/png-image-fix-for-ie/

Thanks Dio - I managed to get the js fix working. I tried that htc fix and my design went apex.

I only had problems with one image after that, in which case a white bg was just as good as transparent.

Cheers for the link
Aaron

I know you've solved this, but this may help someone else out there too. I always put a link to a special "IE6" css file in a conditional comment with this code:

* html img,
* html .png{
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

Cheers Smartplugs. Very similar to what I have:

.header {
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='/themes/vivaexp/images/top-shdw.png', sizingmethod='crop');
}
.primary-content {
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='/themes/vivaexp/images/page-bg.png', sizingmethod='scale');
}
.footer {
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='/themes/vivaexp/images/footer-bg.png', sizingmethod='crop');
}
.footer-base {
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='/themes/vivaexp/images/footer-bg.png', sizingmethod='crop');
}
#home-prom-msg {
	background:none;
	filter:progid:dximagetransform.microsoft.alphaimageloader(src='/themes/vivaexp/images/50-trans.png', sizingmethod='scale');
}

Part of my problem was the path of this images. I found I had to have the '/themes/themename/' part up front for it to work.

You code looks pretty nifty. I take it you just give all your PNG's a class of "png" for that to work across the board? Far smarter than mine, which is class specific.

Cheers
Aaron

Thanks, Double-A-Ron! Yes, I've just gotten into the habit of setting the class for the png images to 'png'. There's a little additional overhead calling all elements with *, but hey, it's IE6 and we do what we can!!

Indeed. I hate MS for not putting IE7 in Windows XP Update. 40% of all IE browsers being version 6, 7 years after it's release, is just rediculous. (according to my stats)

But lets not go there....