Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Menu Spacing problem in IE/Win

3:47 pm on Feb 8, 2006 (gmt 0)

New User

10+ Year Member

joined:Feb 8, 2006
votes: 0

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.


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]

4:29 pm on Feb 8, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
votes: 0

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!


7:31 pm on Feb 8, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:June 9, 2005
votes: 0

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 2</li>

<li>Item</li><li>Item 2</li>


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members