Question

Take a look at this jsFiddle

In all browsers except firefox this menu looks fine.
But if you take a look in firefox you will see that the selected month’s border-bottom needs to be one pixel lower. What is the problem here? And how do I solve it.

Answer 1

This should do the trick. Live example: http://jsfiddle.net/tw16/ZFXwk/45/

ul li {
  float: left; /* changed from display:inline */
}
#months li {
  line-height: 40px;
  border-bottom: 1px solid #4e6531;
}
#months li:hover {
  border-bottom: 1px solid #90bd57;
}
#months li a{ /* new rule */
    display: block;
    padding: 0 17px; /* padding applied here instead of on the li */
}
#months li a:hover{
  color: #90bd57;
}
#months li.this_month { /* made selector more specific */
  color: #90bd57;
  font-weight: bold;
  border-bottom: 1px solid #90bd57;
  padding: 0 20px;
}

Tested in current versions of Chrome, Firefox, IE, Safari and Opera.