Wrong padding only in Firefox

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 co开发者_如何学运维rrect 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.

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;}

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.