Welcome to WebmasterWorld Guest from 54.146.59.202

Forum Moderators: not2easy

Message Too Old, No Replies

Menu Spacing problem in IE/Win

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

5+ Year Member



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]

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

WebmasterWorld Senior Member 10+ Year Member



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

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

10+ Year Member



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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month