Question

I have used font-size: 0; on the parent element and that’s how I got the links to have no spaces but the space is still there in Firefox.

Please test this in Firefox and then any other browser and you’ll see that Firefox is showing a space (albeit 1px) between the links where as no other browser is doing this… well IE6&7 but lets not talk about them…

http://jsfiddle.net/uZMzA/

Does anyone know why? And how I could go about and solving it without using javascript to determine the browser?

Answer 1

The reason why this is happening is because there is a text-node with a line-break in between the a-tags. And since you have set letter-spacing: 1px; and the firefox coders have chosen to implement letter-spacing the way they have, you get 1px of letter spacing after or before that textnode.

The solution, as already hinted at elsewhere, is to change the rule for div#navigation to not have the line letter-spacing: 1px in it, like this:

div#navigation {
  position: relative;
  padding: 1px 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-family: Georgia, Serif;
  margin: 0 auto 2px auto;
  width: 400px;
  font-size: 0;
  text-shadow: 0 1px #fff;
}

You can see a working version with the fix applied here: http://jsfiddle.net/uZMzA/10/