I’ve just written a jQuery plugin to allow a user to simply configure some dropdown menu animations. It tests fine in IE6 and IE7, but the fadeIn/fadeOut didn’t work in IE8. Unbelievable. It astonishes me the things that fail in IE8 but were fine in IE7.
The specific instance here was fading a drop down ul element, which was positioned absolutely with respect to an li element with position:relative. You know, standard stuff. Turns out IE8, position:relative and fade don’t play nicely. The solution in the end turned out to be applying:
filter:inherit
to the li element. Applying this to the ul has no effect. This doesn’t seem to cause any issues with IE6 or IE7, fortunately.
I also found that in IE8 as the fadeIn completes, the faded text appears to jump a pixel to the left. This isn’t tragic, but it’s a bit irritating. I found that this only happened if I used the fadeIn method. If I fade in by using .animate() to change the opacity, then the jump goes away.
You can see the final result here if you’re interested.
working for me, thanks!
Thanks :]
also recommend -ms-filter for a fade effect with img (*. Png) with alpha background
#flexslider-img .slides img{ background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; } #flexslider-title .slides li{ position: relative; z-index: 12; filter:inherit }Are you applying it to the correct element? You might try the parent element rather than the fading element.
Any other ideas? Everyone seems to be saying filter: inherit;, but mine doesn’t work still.
I think that’s just one of those “features” of IE which isn’t readily explained by normal people….:-))
But can you explain what filter:inherit does actually for IE8?
What does it mean?
Thanks! It help me lot lot lot….
It was only my carousel not fading properly in IE8.
Even the original link of carousel is now working in IE8 for fade effect.
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm
Your solution solves that problem for me.
Thanks again 🙂
This helped me a lot! Thank you vey much by the trick!