Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Anyone successfully done a Transparent PNG Fix?


Reply

7 Posts   2056 Views

Avatar
Double-A-Ron

6 July 2008 at 7:16pm Community Member, 604 Posts

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

Avatar
dio5

7 July 2008 at 8:45am Community Member, 501 Posts

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/

Avatar
Double-A-Ron

7 July 2008 at 9:44am Community Member, 604 Posts

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

Avatar
BLU42 Media

11 July 2008 at 4:00am Community Member, 71 Posts

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)
);
}

Avatar
Double-A-Ron

11 July 2008 at 10:01am Community Member, 604 Posts

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

Avatar
BLU42 Media

11 July 2008 at 11:00am Community Member, 71 Posts

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!!

Avatar
Double-A-Ron

11 July 2008 at 11:27am Community Member, 604 Posts

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....