Preamble

I am still learning how to work with CSS, however this corner stones I've found are erroneous (at least apparently) and as such I'm exposing them in order to request comments from the readers.

This only affects the Firefox 1.0.8, as of version 1.5.0.4 this does not happen.

Glitch #1: Firefox creates 1px spaces

Here's the HTML code:

<ul>
<li class="selected">
<a href="/">Blog</a></li><li><a
href="/projects/">Projects</a></li><li><a
href="/articles/">Articles</a></li><li><a
href="/links/">Links</a></li><li><a
href="/about/">About Me</a></li></ul>

I'm going to paste it in pretty print, in order for you can read better:

<ul>
  <li class="selected"><a
href="/">Blog</a></li>
  <li><a
href="/projects/">Projects</a></li>
  <li><a
href="/articles/">Articles</a></li>
  <li><a href="/links/">Links</a></li>
  <li><a href="/about/">About Me</a></li>
</ul>

The reasone why I posted the unformated HTML is because Firefox creates little spaces of one pixel when it contains spaces.

This HTML generates the following image (on Firefox):

On Konqueror:

The relevant CSS part for this bug is:

* {
  margin: 0;
  padding: 0;
}
ol,
ul {
  padding: 0.3em 3em;
}
#siteMenu {
  padding-top: 1em;
  padding-bottom: 1em;
  text-align: center;
}
#siteMenu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
#siteMenu li {
  margin: 0;
  display: inline;
}
#siteMenu li a {
  border-right: 1px solid;
  text-decoration: none;
  font-weight: bold;
  width: 100%;
  padding: 1em;
}
#siteMenu ul li:first-child a {
  border-left: 1px solid;
}

As you can notice there's no reference whatsoever to a margin between li elements, but alas Firefox creates one, randomly.

Glitch #2: one of the boxes is smaller then the others

This one is a little harder to spot the origin but the results aren't.

Here's what Firefox renders:

And here's what Konqueror renders:

Now, what makes Firefox render that block (and only that one) wrong? Here's the original:

If you measure each and every menu block you'll notice that all of them have 28px of height except the one that triggers the bug, that one has 27px of height. But, when you put the mouse hover a element (the menu entry) it is 28px high, however the margin is rendered on the bottom, exactly because the only the bottom border is rendered.

The CSS in question is no rocket science either:

#pageMenu {
  float: right;
  border: 1px solid;
  border-bottom: 0;
  margin: 1em;
}
#pageMenu ol,
#pageMenu ul {
  padding: 0;
  min-width: 100px;
}
#pageMenu ul {
  list-style: none;
}
#pageMenu li a {
  padding: 0.3em 1em;
  display: block;
  text-decoration: none;
  border-bottom: 1px solid;
}

The unformated HTML:

<ul>
<li>
<a href="http://irrepupavel.blogspot.com/">Blog's
page</a></li><li><a
href="http://feeds.feedburner.com/irrepupavel">Blog's
feed</a></li><li><a
href="http://linus.uac.pt/~cogumbreiro/">My page on my
University (python scripts)</a></li><li><a
href="http://flickr.com/photos/cogumbreiro/">My page on Flickr
(images)</a></li><li><a
href="http://del.icio.us/cogumbreiro/">My page on Del.icio.us
(bookmarks)</a></li></ul>

And the formated HTML:

<ul>
  <li><a href="http://irrepupavel.blogspot.com/">Blog's
page</a></li>
  <li><a
href="http://feeds.feedburner.com/irrepupavel">Blog's
feed</a></li>
  <li><a href="http://linus.uac.pt/~cogumbreiro/">My
page on my University (python scripts)</a></li>
  <li><a
href="http://flickr.com/photos/cogumbreiro/">My page on Flickr
(images)</a></li>
  <li><a href="http://del.icio.us/cogumbreiro/">My page
on Del.icio.us (bookmarks)</a></li>
</ul>

Solution for glitch #2

Instead of creating borders on the bottom create them on the top, because Firefox grows boxes that way.

The corrected CSS:

#pageMenu {
  float: right;
  border: 1px solid;
  border-top: 0;
  margin: 1em;
}
/* ... */
#pageMenu li a {
  padding: 0.3em 1em;
  display: block;
  text-decoration: none;
  border-top: 1px solid;
}

Glitch #2: Lookout for vertical bars too

Another problem, that only appeared when I changed font sizes, was the same type of problem described on glitch #2 but this time it was on vertical margins.

The appearence was this one:

As you can notice one of the margins is missing. This does not appear when on hover. However the solution is the same as the later. Instead of defining borders on the right, define them on the left:

#siteMenu li a {
  border-left: 1px solid;
  text-decoration: none;
  font-weight: bold;
  width: 100%;
  padding: 1em;
}
#siteMenu ul li:last-child a {
  border-right: 1px solid;
}