I've been having the same problem with a suckerfish menu which falls behind a scroller placed in a positioned div (scroller genie). I've tried what you suggested but still no luck in IE. What was your exact code for the suckerfish?

I used a high z-index for nested ul's that were styled as horizontal navigation. So in your stylesheet, give the ul and li classes/ids a z-index of "999999" or something else ridiculously high. Try adding the z-index it to the ul first, and if that doesn't work, try adding it to the li's. Also, you may want to look at the positioned div and apply a low z-index to the div.

Hi Robert, I also have come up against the z-ordering problem, now fixed (thanks). However in IE6 the menu doen't dropdown as it should. I link to the suckerfish code in a .js file using: if I add in the defer attribute the menu works but the map won't display Do you have an example (url) of a map and menu coexsisting happily that works in IE6?

Try this: http://www.proguiding.com/map

Tried the z-index method and it works in IE. But not in Mozilla. After adding a select box and scroll mouse function (to zoom in/out) to the google map, it still works in IE. But in Mozilla menu items are shonw (they pop open) but any item that is shown over the google map is not selectable (trying to hoover over it with the mouse makes the open menu items disapear).

hmm... i got it to work in ie but not in firefox... any ideas? thanks for your tip :-)

Did you set the z-index of the map - looking at one of the pages on your site, it looks like the div with the map (#map) has inline style declaration which has no z-index,? In your stylesheet, I would try to put the z-index directly on a ul using an id and see if that works, rather than saying "div#menu_horiz ul". Just play around with putting a z-index directly on the uls and lis with ids, and you should find a way to make it work.

Ralf, I did a litte research, and found out that z-index is NOT inherited. I'm not a CSS guru, but I think you need to apply it directly to the uls. If your ul is buried in a bunch of divs, like they are with your nav: <div id="menu_horiz"> <div id="wrapper"> <div id="menuwrapper"> <ul id="primary-nav"> Then the following CSS statement isn't likely to work, because it is trying to apply a z-index on a ul directly beneath the div with id "menu_horiz". div#menu_horiz ul { margin: 0; padding: 0; list-style: none; border-bottom: 0px solid #C0C0C0; border-left: 3px solid #B5AA94; z-index:999; } The other styles will probably work, because they are inherited by child elements, like the ul. So try either: ul#primary_nav {z-index:999;} or ul#primary_nav ul {z-index:999;}

Thanks for the tip! This helped me troubleshoot the same problem.

Just wanted to let you know this is still helping people. Thanks.

Thanks Robert! Worked like a charm!!!

Thank you Robert so very much! I put the z-index on all of the ul and li items and it finally worked in IE6 & IE7 (urghhhh-IE). I am creating a wordpress site for a client and your information was so incredibly valuable. : )

Hello, I just want to thanks people who participate this forum's topic discussion. I resolved my z-index issue on IE with what you said. Cool.

Thanks I just found your page after searching for a solution to this prob. I had to add "z-index:9999" to all the header navbar drop-down elements (li, ul, ul a, etc...) for it to work in IE6 and IE7. Cheers!

I had a problem with the map laying ontop of a div. After inserting 20+ z-index's using firebug I was able to find the right combination to get the map under my overlaid div.

just used a z-index of 3 for 'ul' and 0 for '.map' and it worked, too...

Thank you so much, you just helped me fix a problem that has been bugging me all week!

Woot. Worked great, saved me lots of trouble and time. Now if only it worked for Select elements.

Thanks to all. The solutions above helped me to fix my problem with IE 7. Now if there was just a way to fix my 401k....

Thanks for the tip. Yes, apply the z-index to the ul's on the style, problem solved

Thanks Robert, for this fix. Took me a while to fix this, but your solution did just the thing :) I used the following css: #menu, #menu * { z-index: 999; } #map { z-index: 0; }

Using any z-index value above 255 seems to fix the issue. In my case just setting the parent DIV was sufficient to make IE behave.

Thanks a lot for posting that solution. I added the crazy high z-index to my CSS and it worked like a charm. I've been trying to get around this problem for 3 days. I wonder why I didn't find it on the Gmap API site...

Hi - that's a great tip - thanks! CSS is the one thing I just don't seem to get... and I can program old-school HTML, PHP, MySQL, C, etc. You do any work on the side? Anyway... cool blog... I'm subscribed to your feed now so I'll check in more often!

Thanks, man. This was a quick fix to an annoying problem.

I am having a different problem the dropdown menu is suckerfish and is in a template, a page built off the template contains the goog map and java for that map. in firefox and ie 6 the dropdowns work perfectly. In later versions of IE the dropdowns dropdown and then freeze over the google map. however the second tier of dropdowns still function normally. anyone got any ideas on what could do that?

i tried the suggestion and it worked for FF but not IE7

Robert, I have noticed the same issue with my Google map. I thought nothing of it at first, except what a huge annoyance it was, and with all the other coding and preparations I was making it was honestly the least of my worries. Then I found your page, and the z-index trick worked like a charm! I just wanted to thank you and let you know that I appreciated the post!