z-index has no effect in IE7 with Google Map and Navigation Sub-Menus

Question

I feel like the problem is extremely apparent. I'm working on an issue with a client's site, which actually happens on several of my clients' sites but this one is the most apparent. IE7 Is refusing to obey z-index rules. I've played around with differing values, particularly on the divs #mapWrapper and #map. Take a look here: http://thepaysongroup.com/wp-content/plugins/hq_idx/searchlistings.php

I've done dozens of web searches and I can't find anything that resolves this issue. I also ready through Aleksandar Vacić's article on IE6/7 z-index discrepancies, but still nothing. Any assistance would be much appreciated, I'm tearing my hair out on this one.

Answer 1

In my experience, z-index in wonky in IE. Setting it to 0 is especially a problem, so make sure 0 isn't one of your z-index values.

Sometimes the simplest solution is to change the source-order of the html: whatever shows up later in the source will be on top. Is that a possibility in your case?

Answer 2

If I remember correctly, you can't have two elements with the same z-index or things get funky. I notice a lot of your paths have z-index of 1000. Some ideas to try:

1. Reset the z-indexes to be incremental within faux layers. That is, if you want all the boundary strokes to be on the same "layer", allocate the numbers between, say, 1001 and 2000 for that layer. The next layer above would use the numbers between 2001 and 3000, etc.

2. Let the document flow set the z-indexes within a few containers, and set the containers themselves to wide-apart z-indexes.

3. Note that historically with IE, elements like combo-box dropdowns and ActiveX controls, etc. get displayed on a layer above the actual page, and so always appear above any HTML, no matter how high you try to set the z-index. Not saying this is the problem, but perhaps using the map api triggers that problem. Read more here.

Answer 3

Okay, I figured it out. So the main navigation is in div #header with position: relative and no z-index defined. Once I placed a z-index on the header the menu popped right out in front of the map.

I guess the lesson here is look for every element with a defined position, be it absolute or relative, and how it is interacting with the elements in question.