Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Anyone successfully done a Transparent PNG Fix?

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

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

Page: 1
Go to End
Author Topic: 2050 Views
  • Double-A-Ron
    Avatar
    Community Member
    604 Posts

    Anyone successfully done a Transparent PNG Fix? Link to this post

    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

  • dio5
    Avatar
    Community Member
    501 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

    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/

  • Double-A-Ron
    Avatar
    Community Member
    604 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

    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

  • BLU42 Media
    Avatar
    Community Member
    71 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

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

  • Double-A-Ron
    Avatar
    Community Member
    604 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

    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

  • BLU42 Media
    Avatar
    Community Member
    71 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

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

  • Double-A-Ron
    Avatar
    Community Member
    604 Posts

    Re: Anyone successfully done a Transparent PNG Fix? Link to this post

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

    2050 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.