Internet Explorer visual element stacking issue

Question

Gday All,

I know this issue is well known, however I have searched high and low for a solution to no avail.

I have created a menu system using nested ordered lists where the menu functionality is controlled by CSS and Jquery. The menu works perfectly in FF, Chrome, Opera and Epiphany.

However in IE 6/7/8 my popup menu is being displayed underneath a table.

The very top box is a div element containing my menu system. I am working with legacy code that uses tables for display so the next box and the "ts found. Try a different subcate" text is in a "td" element of a table.

I have tried to force the table to have a lower z-index but this does not work.

How can I make IE behave like every other browser and display my menu on top of the table?

Cheers,

Michael

Answer 1

If you can make it absolutely positioned, it will no longer inherit the z-index from it's parent, though this isn't always an option.