Menu Spacing problem in IE/Win

[many tentacles]

I've created a collapsable menu system which i was proper happy with. I created it and tested it on a mac but when i then went to do a final test on IE for windows... surprise surprise it didn't work properly! It does work in all other browsers for windows though!

It shoves a massive gap between the menu items for some reason... there should only be a small margin above each of the main menu items, and all of the sub menu items touch eachother.

[snip]

Any ideas would be much appreciated. thanks

[edited by: createErrorMsg at 4:18 pm (utc) on Feb. 8, 2006]
[edit reason] No URLs, please. [/edit]

[createErrorMsg]

shoves a massive gap between the menu items for some reason.

The reason is an IE browser bug, which is triggered by setting links to display block in an ordered or unordered list. The cure is simple enough. Just add display:inline; to the CSS for the LIs in the menu, as in...

#nav li {display:inline;}

This cures the bug in IE with no negative fallout in other browsers.

Oh, and welcome to WebmasterWorld!

cEM

[coopersita]

If transforming it to inline is not an option, try getting rid of white space in yur html. I know it sonds crazy, but IE sometimes adds space if you have a line break between list items:

Instead of:
<li>Item<li>
<li>Item 2</li>

Write:
<li>Item</li><li>Item 2</li>