EverydayOrdinary

So I’m working on a new design for my church’s website, right? It’s a simple design. I’m a semi-minimalist.

I also happen to like:
a) Web Standards
b) Logical HTML markup
c) Human-readable code

So I wanted to do the navigation menu for the site as a Unordered List, e.g.:

<ul id="menu">
     <li id="someID">some link</li>
     <li id="someOtherID">another link</li>
     <li id="yetAnotherID">random link</li>
</ul>

Okay. Easy. But in my design, I want the menu horizontal, not vertical like a list. Okay. Still easy. I just add:

#menu li {
     display: inline;
}

to my style sheet, and add all the needed padding, borders, etc. And presto, my menu is horizontal.

But it’s displaying wrong. At least in Firefox. In between each list item is a bit of white-space I can’t get rid of. At all. I set all my margins and padding to 0 to debug, but it still shows up.

After much hair pulling, I discovered that Firefox isn’t ignoring the line breaks I used to make my HTML human-readable. It’s turning them into a space. Yeah, that white-space I can’t get rid of? It’s … white-space. And the only fix I can figure out is to get rid of my linebreaks. Which I don’t want to do.

Some searching on the web turns up that that’s the expected behavior in Firefox.

Apparently W3C’s spec leaves it up to the UA to figure out what to do with whitespace, and Firefox is treating white-space as a text node in the DOM model (no, I didn’t figure out that part: this one guy looked at the DOM inspector for some javascript he was coding). Which confirms my theory that Firefox is turning my linebreaks into a space. I suppose there’re some technical reasons Firefox does this, but it’s really, really annoying.