Text displayed under overlay for Jquery Tools Overlay in IE 7

Question

Link: http://designbracket.com/ . Click "Our Services" and the links below it. I used Overlay of Jquery Tools to display overlay when clicking any link. This is the drupal site. The problem is that although the overlay opens as expected, the text appears beneath it in IE 7, while this does not happen in FF or Chrome (obviously not :)).

I think this has something to do with the z-index IE 7 bug. However, despite two days on this stupid problem, I had no progress.

Kindly help. Any help or suggestions would be greatly appreciated. If the question is controversial, please let me know and I will try to include more detailed information.

thanks

Answer 1

I know this is an old ticket, but I'm just going to put it there because it helped me.

I'm having trouble overlapping with IE7 and jquery tools as a result of having my overlay divs inside the grid 960 div. Changing the z-index ( z-index: 9999999 !important; ) did not help at all.

To resolve, I simply moved my overlay divs immediately before my closing </body> , which was outside of any .container or .grid classes.

Hope this helps someone.

Answer 2

I had a similar problem when the overlay displayed behind the Expose mask in IE7, so the page did not have clickable elements, including overlay. Adding this parameter to overlay() solved the problem:

 onLoad: function() { this.getOverlay().insertAfter('#exposeMask'); }