Text shows under the overlay for Jquery Tools Overlay in IE 7

Question

Link : http://designbracket.com/ . Click on Our Services and the links under it. I have used Overlay of Jquery Tools to display overlay when any link is clicked. This is a drupal site . The problem is that though the overlay is opening as expected however the text is appearing under it in IE 7 while that does not happen in FF or Chrome (obviously not :)).

I think this has something to do with the z-index bug of IE 7. However, in spite of wasting two days on this stupid issue I haven't had any headway.

Kindly help. Any help or suggestions would be deeply appreciated. In case the question is ambiguous please let me know and I would try and include more details.

Thanks

Answer 1

I had a similar problem where the overlay was displayed behind an Expose-mask in IE7, thus leaving no elements on the page clickable, including the overlay. Adding this in the overlay() settings solved the issue:

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

Answer 2

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

I experienced overlay issues with IE7 and jquery tools as a result of having my overlay divs inside a grid 960 div. Changing the z-index (z-index: 9999999 !important;) didn't help at all.

To resolve i simply moved my overlay divs to just before my closing </body> tag which was outside any .container or .grid classes.

Hope this helps someone.