White Space Killing CSS Layout

After a longer-than-I-want-to-admit session of reconciling CSS rendering problems where <li> items were mysteriously 3px lower in Webkit (Chrome& Safari) and Internet Explorer, but not Mozilla (FF4 beta 3), I was reminded, and hopefully will remember this time that:

  • item 1
  • item 2
  • item 3
  • item 4

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

on all browsers, is not equal to:

  • item 1
  • item 2
  • item 3
  • item 4

<ul><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ul>

Friggin' white spaces with a non-zero height pushing my items down. Bah!

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Jules Gravinese's Gravatar Try font-size:0 applied to the UL
# Posted By Jules Gravinese | 8/25/10 11:23 AM
martin's Gravatar Sounds like your page was in quirks mode. Use a proper doctype and you won't have this problem.
# Posted By martin | 8/25/10 2:06 PM
jason olmsted's Gravatar @Jules - Thanks for the suggestion. Condensing the code is probably the best option from a performance point of view, but for this site, I will probably lean towards easier maintenance and try reducing the font size.

@martin: I should have put more details up with this post along with screen shots and real code snippets - I was lazy. Anyway, using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...; >
# Posted By jason olmsted | 8/25/10 2:50 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.001. Contact Blog Owner