Jump to content
Killersites Community
PicnicTutorials

IE7/8 break effect when using a .png

Recommended Posts

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!

Edited by Eric

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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;

}

Edited by Eric

Share this post


Link to post
Share on other sites

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('shadow4.png');

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

});

});

Edited by Eric

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)?

Edited by Eric

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by Eric

Share this post


Link to post
Share on other sites
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???

 

Share this post


Link to post
Share on other sites
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 ??

Share this post


Link to post
Share on other sites

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 }

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Edited by Eric

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×