Wrong padding only in Firefox

Question

I have this annoying problem with padding. I am building a menu, here is the html code for it (I have taken out all the other tabs and leave only one for better readability):

<div id="menu">
    <a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a>
</div>

$description can take two values:

1. selected
2. notSelected

And the $path is just for correct relative addressing.

Here is the CSS code:

#menu {
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    background-color: #1958b7;
    padding: 0 0 20px 0;    /*Here set the size for tabs.*/
    border-top: 10px #2175bc solid; /*Here we add border.*/
}

#menu a {
    color: #fff;    /*White color. */
    text-decoration: none;  /*No decoration.*/
    padding: 0px 9px 5px 9px;   /*The padding for tab.*/    
}
.selected {
    border-left: 8px solid #5ba3e0; /*Defining color and width for left border.*/
    border-right: 8px solid #5ba3e0;    /*Defining color and width for right border.*/
    background-color: #2586d7;
}
.notSelected {
    border-left: 8px solid #1958b7;
    border-right: 8px solid #1958b7;
    background-color: #2175bc;
}

Now the problem is with padding from #menu a:

padding: 0px 9px 5px 9px;   /*The padding for tab.*/

In Opera, Chrome, IE7, IE8 and IE9 it works properly, the result is this:

But in Firefox 4.0.1 (and I remember this was also a problem with FF 3.6) it displays like this:

As you can see, the FF puts 1px above tag Opis for no reason, even though I have defined explicitly not to put any padding on top. So now that 1px of strong blue color is visible on top of tab.

Answer 1

Although it works fine for me in Ff 3.6.17 up-to FF 5.0, this can happen from whitespace between the tags.

workarounds (any one of the following) that should help

1. remove the whitespace
   <div id="menu"><a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a><div>

2. set #menu{font-size:0px;line-height:0;} and reset those properties to what you want for the links #menu a{font-size:12px;line-height:12px;}

3. float the links inside the #menu with #menu a{float:left;}

Answer 2

It sometimes (the gap only appears when I resize the jsFiddle iframe [??]) looks like this in my Firefox 4:

http://jsfiddle.net/tvHgX/

so, there is a gap, but it doesn't look exactly like your screenshot.

I fixed the gap to never appear by adding float: left to #menu a. I also replaced your line:

padding: 0 0 20px 0;    /*Here set the size for tabs.*/

with overflow: hidden, to clear the floats so you don't have to manually specify padding. You can revert this fix if you like.

Complete code: http://jsfiddle.net/tvHgX/1/

display: inline-block would also work in place of float: left if you don't want to use floats for some reason.