Menu Issue in Mozilla

Hi

I have (with some help through this forum) created a menu / sub-menu in HTML and CSS. Two of the main menu items have sub-menus.

The problem is that in Mozilla when only the main menu is displayed there is a gap after each main menu item that has a sub-menu. Those main menu items that don’t have a sub-menu have correct spacing to the next main menu item.

This is only a problem in Mozilla (I’m using 3.6.3).

I’ve included the CSS code below. I have messed around with various padding and margin properties setting them to zero but no luck.

Any help is much appreciated.

body {font-family: Arial, Helvetica, sans-serif;}

a:link {color:black; text-decoration:none;}
a:visited {color: black; text-decoration:none;}
a:hover {color: black; text-decoration:none; background: url(Images/ShiftPoint_menu.jpg) no-repeat;}
a img {border: 0;}

#menu ul {position: absolute; list-style: none; top:150px; left: 0px; width: 138px; padding: 0px; margin: 0px; text-align: left; font-size: 12px; font-weight: bold;}

#menu li {padding-left: 10px;}

#menu ul li a {padding-left:1.5em;}

#menu li ul {position: relative; top: 0px; left: 0px; font-size: 11px; font-weight: bold;}

can we have a link to the page please?

Before using any more time, please ensure your page code is validated (validator.w3.org) so some errors caused through incorrect code are removed.

I had a similar problem about a year ago but it was with IE6, which is why I reckon you may have invalid code. FF 3.6.3. was a doddle to make work similar to IE7. But in IE6, the vertical nav menu had extra spacing when there was a sub menu, which flew out with sub links eg


Menus
-->Breakfast
-->Lunch
-->Dinner


There was a gap beneath the Menus button where there was a sub menu. If no flyout were available there was no extra/added space. Solution was provided by Aero (:thumbsup: again), to assign a class to Menus button and assign padding-bottom to it.

Dunno if that helps you but, it might give you a nudge.


* html #left ul li.sub {
margin-bottom:-3px;
}



tweak it to fix the issue in whatever brower you have remembering that the '* html' is for IE6 only.

for other browsers, use #left li.sub{} substituting 'left' with the name of your div - if there is one assigned.


bazz

you might want to try to drop the positioning:absolute. always causes me trouble for no real gain.

Any help is much appreciated. If you don't have a server space, get a free one from freehostia.com and upload your files. Then post a link to it.

bazz - tried the margin-bottom piece, decreased the gap a little but didn't resolve. If I increased the -3px then this did close the gap, but when I when to menu item that had submenu, menu lines were displayed on top of each other.

Went to the validator website, gave me some issues in the html file (although the error it is flagging I cannot see why a problem). Couldn't see how to validate the CSS file which I think is where my error is.

Couldn't see how to validate the CSS file which I think is where my error is. http://jigsaw.w3.org/css-validator/

Thanks, ran my CSS through that validator and all came back clean.