Hello javascript folks,

PROBLEM: javascript dropdown problem:
DESCRIPTION: menu falls behind a container box on web page
COMMENTS: It works fine in Firefox but not in IE6 and IE7


Notice this URL using IE6/7:

http://iimaaconference.com.yourtempsite.com/site/welcome_to_IIMAA_training_conference.html

You'll see a javascript scrollbar container box, holding the main content. You will also see a javascript
horizontal menu -- starting with "Home" / "About the Conference" / "The Venue" and so on.

Now, go ahead and mouse over on "About the Conference" and others. See how the drop down menu falls behind
the main content container box? The menu is not readable, then menu should be on top of page content, not
hidden behind.

The javascript drop down menu works perfectly fine over static HTML, visit the URL below to see how the
menu should look:

http://iimaaconference.com.yourtempsite.com/site/

Additional Notes: One developer mentioned there is a compatibilty problem with IE6/7 and overlapping javascript
menu with scroll box. The developer did some research, mentioning to eleminate the javascript scrollbar altogether.
Customer wants both menu's and scroll box intact.

OK, if anyone has ideas about how to fix this problem, please let me know.

Best,
Brad

You're setting the z-index of the submenu to 2, and not setting the z-index on the scroll box at all. My guess is that as IE is rendering the page, it is assuming z-index values to layer the page in what it expects is the correct order. Therefore, your scroll box could have a higher z-index. Since there really should be nothing on the page that goes on top of the submenu div, I'd start by cranking the z-index up to 1000 or so.

You moved the menu under the box? Normally, I find that when things are going under, it's because the z-index is incorrectly applied to an element which has not also been given absolute positioning. Remember, z-index only applies to absolutely positioned elements.

this issue is caused by positioning elements absolute - in IE6/7 when you position elements absolute they generate a new stacking over so the z-index resets itself. A great guide I always refer back to on this is here: http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/

clearly shows you whats going on and how to fix it