PaulBM 103

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?

http://easttown.co.uk/raphael/wrong.html

http://easttown.co.uk/raphael/right.html

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?

  • When you display lists inline the white space will affect padding just like a space would in a sentence of plain text. Gary Hepting almost 7 years ago
  • I did wonder if it was related to being inline, but it really caught me out. ;) PaulBM almost 7 years ago
  • @Gary any reason why you didn't post the answer as an actual answer? It is the correct explanation... danwellman almost 7 years ago
  • I wasn't positive and didn't have the time to double check, I was at work. :) Gary Hepting almost 7 years ago
  • Yup, Gary, your comment is the right answer. ;) PaulBM almost 7 years ago

1 answer

o.k.w 2355
1
point

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.

Stack the <li> side-by-side by floating them to the left. Set the height of the <ul> to 20px. Finally adjust the <li> margin to your taste if required.

Answered almost 7 years ago by o.k.w