I've done my best to sweep the forum for similar issues, and in fact found at least one, but to my knowledge it yet to be solved.

Basically, I use PIE to enable box-shadow and border-radius capabilities in IE8. It works almost perfectly, but with two caveats (one major and one minor), unfortunately. I'll discuss the major one here:

I'm developing a site locally in WordPress (so I can't provide a live link, I'm afraid), but I'll do my best to submit code and screenshots to explain the situation. I've used CSS3 decorations and transitions to create a slide-down/slide-up menu (with sub-menu capabilities) which works perfectly in webkit browsers. I realize transitions is not gonna work in IE, and I've accepted that. The menu markup simply consists of an unordered list, like:



I use CSS3 transitions to simulate the slide-down/slide-up. With opacity (0 -> 1) for fade-in effect and height (0 -> 22px) for the slide-in-expansion. I've also applied a box-shadow to menus/sub menus (ul-elements) and rounded corners on the bottom with border-radius. The last two effects works great, even in IE8. My problem arises when leaving the hover-state (mouseout): The menu background remains on screen instead of hiding (opacity: 0).

I've tried experimenting with -pie-watch-ancestors (might have used it wrong) and looked into the whole fireEvent-technique (but according to some comments, I don't think that's it here). Right now I'm avoiding applying behavior on hover and moved it to the target element instead, as some suggested.

Instead of pasting all the code on here, I've created (and attempted to clean up) a jsfiddle: http://jsfiddle.net/mbFVs/1/

I know that won't help reproduce the problem, since PIE is not loading, but at least the markup and CSS can be fiddled with. Also, I am aware of other issues in IE8, as the sub-menu displaying immediately, but right now, this is my primary issue.

Below I've attached a couple of screenshots depicting the whole scenario.

Hope somebody can point me in the right direction

PS. I use selectivizr to enable some selector-power, which works as expected, and I've tried disabling that in debugging, so that can be ruled out as the bad guy.

Your main problem is that PIE does not support opacity: https://github.com/lojjic/PIE/issues/46

I made some tweaks to your fiddle which you can view here, and seems to work fairly well: http://jsfiddle.net/mbFVs/4/
- Added visibility:hidden/visible to the submenu
- Added -pie-watch-ancestors:1 so it reacts to the ul:hover>li selector

This does slightly change the behavior in browsers that support the transitions, in that when leaving a menu it hides immediately rather than fading out / sliding up. You could get around that by making the visibility:hidden conditional based on whether transitions are supported.

Good evening, Jason!

I can't thank you enough for your wonderful tool and support.

The thing is, I've already found out pretty much all of what you stated above. I searched through the forum once again (this time using the advantageous search function ) and learned about the opacity issue. I stumbled upon the visibility-method for simulating opacity in IE in a comment on some random blog post, which worked almost perfectly, without messing with opacity fade-in in capable browsers (plusplusgood!). I didn't even realize what you pointed out about the fade-out until now. I'll just use add it to the conditional IE stylesheet instead as suggested (thank you for spotting that!).

Nevertheless, I had already given up on PIE at this point, for this particular case (I still used it elsewhere) and settled without the box-shadow and rounded corners in IE8. It never crossed my mind to test it again after discovering the visibility property. I just did, and it couldn't had worked any better!

I'm super happy right now, and couldn't have asked for more!

You, Sir, are the greatest!

Thank you a thousand times!

PS. I'm sorry for my impatience earlier, but I'm pretty new to this and just wanted it to work so badly... I guess I'll learn to behave as time goes by...