This problem came about when I switched from static test html pages to PHP generated pages. My first version put all the li tags on one line and the menu closed up.
Here are two pages that illustrate the problem, it took me far too long to suss out the problem. Now I'm curious as to why?
Click the links in the page to see the menu jump around. :)
What I'd like to know is why is the white space in the source affecting the spacing? I thought white space didn't affect layout with modern standards compliant browsers?
The safest bet is to pack or stack the list items tightly side-by-side (not the codes but the rendering) and then space them out by paddings or margins.
<ul> <li>one</li> <li>two</li> <li>three</li> </ul> <ul><li>one</li><li>two</li><li>three</li></ul>
The above two will be more or less the same if
<li> is set to 'block' display. When set to 'inline', like Gary said, the white spaces kick in.
In an ideal world, we would want them to rendered similarly regardless of display type. The are perhaps a dozen ways to do it, I will just list one.
<li> side-by-side by floating them to the left. Set the height of the
20px. Finally adjust the
<li> margin to your taste if required.