I have this jQuery menu drawer system I developed that seems to work fairly well in all browsers except IE 7. I don’t care about IE 6 and because of this new issue I’m seriously considering not supporting IE 7 either.
The IE 7 problem is that the drawer is closing while the mouse is still inside the drawer.
The HTML/CSS for drawer #1 is exactly the same as in my actual website. You can get your mouse inside the drawer anyplace except where it intersects with the content area. Once your mouse strays inside the area where the drawer covers or intersects the content area, it will slam shut.
The HTML/CSS for drawer #2 is more generic than the actual website and you can see the drawer slams shut almost immediately. Therefore, this problem is somehow also related to the HTML/CSS content within the drawer yet I’ve been unable to narrow it down.
I don’t understand why this happening or how to fix it. It’s even more strange how the problem seems to behave differently between drawer #1 and #2 based on HTML/CSS content alone.
I spent a lot of time last night playing with z-index but now it seems obvious this doesn’t have anything to do with it since the drawers always stay on top of the content as they should.
Please forgive the ugly colors and outlines… it’s just for demonstration purposes.
To see my desired behavior, just open the jsFiddle in any modern browser other than IE 7.
I’m interested in knowing if anyone can explain or identify which IE 7 bug is causing this strange issue and if there’s a simple (HTML/CSS only) solution. I prefer not to tinker with the jQuery too much as this is finally working perfectly in the other browsers.
See: http://jsfiddle.net/thirtydot/PayFw/190/ (or /show)
Adding this fixes it:
Yet another IE7 problem related to hasLayout.