CSS Horizontal Menu: Firefox whitespace bug
So I came across the most baffling bug the other day that locked me up for a good three hours. I thought maybe I’d just put down what I discovered here on the outer reaches of the blogosphere in case anyone else happens to hit that magical combination of Google keywords and a link to this page comes up.
To describe the problem succinctly: when you’re trying to create a horizontal menu using unordered lists (<ul> and inline <li>), for some reason, in Firefox (2 - I don’t know about 3 which just came out last week), if there is any whitespace between a closing </li> tag and the opening <li> tag of the next item, that whitespace actually displays. At first it looks like a margin spacing issue, but after some tests it’s clearly not. In fact, what baffles me is that ANY text between the closing </li> and the opening <li>, that text actually gets displayed inline! Which makes no sense, because I didn’t think that the <ul> element could have a text node as a direct child. Apparently it can, in Firefox at any rate.
The solution, as I have discovered is to set your <ul>’s display attribute to “table”. I don’t believe IE7 and certainly not IE6 understand display:table, so this is a non-IE fix, but then again, IE wasn’t exhibiting the whitespace behaviour. Here’s some sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* { margin:0; padding:0; }
ul {
list-style-type:none;
list-style-position:inside;
margin:0px; padding:0px;
display:table; /* This is used for firefox */
/* to avoid the horizontal whitespace bug */
}
li {
border:1px solid black;
display:inline;
margin:0px; padding:0px;
border-collapse:collapse;
}
a {
}
</style>
</head>
<body>
<ul>
<li><a href="#">Line 1</a></li>
<li><a href="#">Line 2</a></li>
<li><a href="#">Line 3</a></li>
</ul>
<p>Other stuff....</p>
</body>
</html>
3 Responses to 'CSS Horizontal Menu: Firefox whitespace bug'
Leave a Reply
You must be logged in to post a comment.
on August 19th, 2008 at 12:44 am
sorry for trolling, but this was driving me crazy and your blog is the only resource that I can find on it.
FF3 seems to ignore the display:table “fix” and it puts the white space between the li items.
any other ideas for fixes besides running all the items together with nothing in between them?!
on August 20th, 2008 at 10:12 am
Really? I just copied and pasted my code above, saved it into “list.html”, opened it with FF3 and it works fine.
You might want to make sure that you’re using the correct (ie: strict) Doctype - that might have something to do with it.
On a side note, I’m noticing that there is indeed a discrepancy with the way IE7 displays this: it still has a whitespace bug, but it’s not on the outside of the box (to the right of the border) - it’s on the inside of the box. Bloody hell. But less annoying than the FF behaviour.
on August 23rd, 2008 at 11:13 am
My mistake, classic coding typos make all the difference.
Your fix works and works great.
Still not sure why I haven’t found this behavior documented elsewhere.
Thanks for the write up, the fix, and the follow up.