Menus hidden by Google maps

Join in these discussions today! Log in or register.
Wednesday 18 June 2008 9.20pm
Hi James

I noticed that the sites main horizontal drop-down menu items (Home, News, Forum, etc) are obscured if a Google map is present on the page.

Below is a snapshot of the "Food/Drink | Latest Reviews" page, complete with Google map, rendered in my Firefox 3 using Adblock Plus to eliminate the Ads...

Current menu problem - notice how the menu is behind the map

And the same shot with the problem fixed.

The fix is simple:

1) In file se1.css, update this div#nav to include a high z-index...

div#nav ul.level1 li.submenu {
border-right:4px solid #ff9;z-index:99999
}

2) Then, everywhere on the site that has a Google map, for example the map.html page of "http://www.london-se1.co.uk/restaurants/reviews/map", add a low z-index to the map attributes...

<div id="map" style="width:70%; height: 450px;float:left;font-size:85%;z-index:0"></div>

I have tested the solution using Firefox 3 and IExplorer 7.
Tuesday 24 June 2008 11.46am
Thanks very much BSB - I'll get on the case shortly.

Editor of the London SE1 website.
Subscribe to our SE1 Direct weekly newsletter.
Tuesday 24 June 2008 9.27pm
Now fixed, for the reviews map and news map at least.

I have to admit I hadn't come across z-index before, so thanks again.

I've also taken the opportunity to eliminate the sloppy use of inline CSS to style those maps.

(Tho' as a matter of principle I don't entirely agree with the use of ad-blocking software, I have to say.)

Editor of the London SE1 website.
Subscribe to our SE1 Direct weekly newsletter.

To post a message, please log in or register..

Keep up with SE1 news

We have three email newsletters for you to choose from: