Grow your CSS skills. Land your dream job.

HELP!!! PNG transparency in ie

  • # October 20, 2009 at 5:20 pm

    Hello everyone,
    I am working on my portfolio site, it uses some basic jquery image fade. When you hover over the jars they get a spotlight on them. It works great in mozilla and safari, but IE8 messes up the PNG. It only happens with js enabled, so there is something within jquery that messes me up. I am still in kindergarten when it comes to js, so please help me solve this issue!!! NOTE it works well in firefox and other browsers, not IE.
    Thanks for any help.

    LINK: http://www.blizniuk.com

    # October 24, 2009 at 12:48 am

    OK I figured it out…
    For you that have a similar issue, maybe this will help:
    I found out that ie handles filters a little differently, the issue is with the browser itself, and not jquery. Whenever you adjust alpha opacity for an image with js, ie takes your transparent png and makes it opaque, instead fading in and out already transparent image. If anyone has a direct fix for this issue, please post it here, I found a workaround:
    Simply do a conditional for ie, looks like this:

    if($.browser.msie){
    $(this).stop().animate({ marginTop: "-20px" }, 300);
    $(this).parent().find("span").stop().animate({ marginTop: "28px"}, 300);}

    else{
    $(this).stop().animate({ marginTop: "-20px" }, 300);
    $(this).parent().find("span").stop().animate({ marginTop: "28px", opacity: 0.5 }, 300);
    }},

    I basically turned off fading for ie, notice in "else" bracket, opacity is defined, whereas in .msie it is gone.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".