CODEWITHSUNDEEP
htmlcssfirefox
halliewuud
halliewuud

Reputation: 2785

css problem with border-bottom in firefox

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.

Upvotes: 2

Views: 2300

Answers (1)

tw16
tw16

Reputation: 29575

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.

Upvotes: 2

Related Questions