Best way to fix CSS/JS drop-down problem in IE7 when page includes Google Map

Question

I have a page using < ul > lists for navigation (Javascript changes the styling to display or not on mouseover).

This is working fine for me except in IE6 and IE7 when I have a Google Map on the page.

In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.

I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a < div >, not an < iframe >.

Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?

Answer 1

I don't have an immediate answer for you, but the tools mentioned in this answer (particularly the IE DOM Inspector) may help.

Answer 2

@Cebjyre thanks - I'm using IE developer toolbar at the moment, but it's not the most helpful tool in that it's read-only. I'll try the IE DOM Inspector and then maybe I should give the cross-browser FireFox a go...

Answer 3

I don't know if this will fix your problem but you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists. I don't know if it will work for sure, but it's worth a shot.

Answer 4

I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this jQuery:

$(function () {
  $("#primary-nav").appendTo("#footer");
});

Where primary-nav is the ID of the drop-down container element and footer is the ID of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.

The reason this works is because IE respects source ordering more than it does the z-index. It still wasn't able to display over top of a Windows Media Player plugin though.

Answer 5

I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.

Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.

I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don't actually need Javascript to change styles on mouseover and stuff like that.

If you want to check out what CSS hacking is about: click here

If you want to check out some pure CSS menu examples: click here

Hope this helps!

Answer 6

According to this google maps thread, you are correct - an IFrame is inserted by the google code.

You'll need to use the solution which Dan mentioned,

you may want to try this solution at ccsplay.co.uk which fixes the problem of menus appearing underneath drop-down lists

Alternatively, see Internet Explorer HACK/Fix For Select Box Showing through DIV.

Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.

An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.