• Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Topic: IE7/8 break effect when using a .png

IE7/8 break effect when using a .png for the shadow under each colored block. The rest, including IE6 are fine with them. Note, IE6 has it's own problems, that I already fixed in my real page. Here is the test page >> Hover over the blocks in FX and now in IE7/8 >> Anyone see why IE is doing that to the shadow (i.e. blowing it up to ten times it's original size)???

If you take the comments out of the JS in the head section and use the full url .jpg one instead, then you will see that IE works just fine. It's only when using a .png that IE goes wrong. I guess if I have to I can try and make a jpg do in it's place, but it wont look as good, and I prefer not to. Thanks!

Last edited by Eric (2009-09-30 12:59:52)

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: IE7/8 break effect when using a .png

Ooh nasty, it looks like IE is ignoring the png. Just an idea, but have you tried using the png fix that is usually for IE6?

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

virtual wrote:

Ooh nasty, it looks like IE is ignoring the png. Just an idea, but have you tried using the png fix that is usually for IE6?

Hello, no, but I'll try anything.

The problem lies in here. If I put a background on the below code (say #fff) then it fixes it. But, then of course it's not a transparent png anymore. Maybe we can find a way to trick IE. Fake Background image or something.

#nav li img.shadow {
position:absolute;
bottom:-15px;
left:0;
z-index:1;
}

Last edited by Eric (2009-09-30 14:29:55)

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

Just tried the png fix. I verified it was working in IE6, but it does not fix IE7/8. I just checked how it would look using a jpg, and it wasn't pretty. So I need to find a fix.

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

OK, the problem is caused by the opacity code below. If I remove it, the IE7/8 problem goes away. But, then I loose part of the effect. Any way to write that so IE is happy with the opacity??? Thanks!

$(document).ready(function() {
// Append shadow image to each LI
$("#nav li").append('<img class="shadow" src="img/shadow4.png" alt="">');
// Animate buttons, shrink and fade shadow
$("#nav li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "85px", height: "20px", marginLeft: "10px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "105px", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
});

Last edited by Eric (2009-09-30 15:38:04)

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: IE7/8 break effect when using a .png

Have you read this?
http://flowplayer.org/forum/8/25583

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

Thanks a bunch! I'll give that one a try next. Seen here http://blog.mediaandme.be/?ref=17

Normally I don't really worry about these ie bugs to much because I always find a way to fix them. But this one has me worried a little bit. I need this effect for my site. It's the bread and butter. I did already try adding the opacity to a container instead of the image - both via js and just css. Strangly neither worked.

Basically, I want to recode that js so that it tells the shadow image to resize, and at the same time, tells the shadows container to opacitize.

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

Here http://flowplayer.org/tools/tooltip.html#slide they just turned the fade off in IE. "If" I have to resort to that, what's the best way to tell IE not to read the JS?

The only way I can think of is to us CCs and feed ie a fake external js link of the same name as the real one. But there has to be a better way? Possibly write the condition into the js itself (the block in the head)?

Last edited by Eric (2009-09-30 17:21:08)

  • Registered: 2009-04-30
  • Posts: 102

Re: IE7/8 break effect when using a .png

If you haven't found a solution yet,

I don't know if this will work, but you can try use jQuery's "fadeTo" function, alongside your "unqueued" animation. But I haven't tried it, normally the built in jQuery "fade" functions are ok with IE.

so from your code:

$(e).find("img.shadow").stop().animate({ width: "85px", height: "20px", marginLeft: "10px" },{duration: 250, queue:false}).fadeTo("normal", 0.25);
  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

Thanks for helping BeeDev. I just tried it, but unfortunately it didn't fix the bug. I have a new and very simplified test page. The JS links and the image link are absolute, so it's a copy and paste test page. Here is the new TEST PAGE. If some one could think of anything that would be awesome!

Can someone show me how to code the JS so that it does not include the opacity fade in IE??? Again, it's only the small code block in the head that needs altering. Further down the page in this link he offers a solution to just fee IE.

Last edited by Eric (2009-10-01 06:41:10)

11 Reply by lm

  • lm
  • Advanced Member
  • Offline
  • Gender: Female
  • From: The Netherlands
  • Registered: 2008-12-20
  • Posts: 2,770

Re: IE7/8 break effect when using a .png

just in case, did you try CSS opacity instead of using .png?

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

lm wrote:

just in case, did you try CSS opacity instead of using .png?

Thanks, but that wont work in this case. Although, I finally found a solution I can live with. I simply feed IE no opacity after the original script. opacity: "none"

I want to trim the duplicate info for IE that I do not need now. How do I get rid of the code in bold with out breaking the JS???

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("#nav li").hover(function() {
            var e = this;
            $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
                $(e).find("a").animate({ marginTop: "-10px" }, 250);
            });
            $(e).find("img.shadow").stop().animate({ width: "65px", height: "10px", marginLeft: "20px", bottom: "-10px", opacity: "none" }, 250);
        },function(){
            var e = this;
            $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
                $(e).find("a").animate({ marginTop: "0px" }, 250);
            });
            $(e).find("img.shadow").stop().animate({ width: "105px", height: "27px", marginLeft: "0", bottom: "-15px", opacity: "none" }, 250);
        });                   
    });
</script>
<![endif]-->

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: IE7/8 break effect when using a .png

Eric wrote:

The problem lies in here. If I put a background on the below code (say #fff) then it fixes it. But, then of course it's not a transparent png anymore. Maybe we can find a way to trick IE. Fake Background image or something.

#nav li img.shadow {
position:absolute;
bottom:-15px;
left:0;
z-index:1;
}

I am not familiar with the jsquery script but when you said that adding a background color solves the problem except now it's not a transparent png...have you tried background: transparent ??

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: IE7/8 break effect when using a .png

In addition to my last post, I revieved your highted code that you want to remove:

$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
                $(e).find("a").animate({ marginTop: "0px" }, 250);
            });

Now I'm no script expert but if I count the open { it should equal to that same amount for the closing }

  • Registered: 2009-04-30
  • Posts: 102

Re: IE7/8 break effect when using a .png

Remove the }) right under the bold text, and remove the bold text also. That won't break the JS.

I know this might be late, but have you tried wrapping the png image in a DIV tag, and manipulating the Opacity of that div tag instead of the image itself?

16 Reply by lm

  • lm
  • Advanced Member
  • Offline
  • Gender: Female
  • From: The Netherlands
  • Registered: 2008-12-20
  • Posts: 2,770

Re: IE7/8 break effect when using a .png

that is CSS opacity which i was suggesting as well. It always easier( and better) to use a div with background image and then apply to this div needed opacity (adding  just one line in CSS ).

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: IE7/8 break effect when using a .png

Thanks a TON guys (and girls) for helping me out! I am finally happy with the outcome. IE gets no opacity. Then I just make the shadow smaller on hover in IE to give the illusion of transparency. It's a good workaround. Weeuu, boy am I glad that is over. My brain hurts! That was driving me nuts! 

Eddie, good idea, but transparent was one of the first things I tried. Fake image, etc

BeeDev and Eddie, perfect! That trimmed the fat, and works perfect.

BeeDev, Yeah I tried applying the opacity fade to the images container instead. It works to a certain degree. The image inherits the opacity which originally breaks the img. But if you give ie position relative that stops the inherance, but then you don't have transparency and it deffeats the purpose.

IM, I tried various versions of css opacity, they all failed in one degree or another.

Last edited by Eric (2009-10-01 10:07:42)