HTML/CSS Firefox problem

Question

have a look at the top menu on these two pages on Firefox:

http://outsidemma.com/2010/100031-bj-penn-the-prodigy-jay-dee.php

http://outsidemma.com/index.php

On the first page for some reason there is some extra spacing above it.

This only happens on Firefox. I am using Firefox 3.6.

Answer 1

Your problem is here:

.clearfix:after {
  clear:both;
  content:" ";
  display:block;
  font-size:0;
  height:0;
  visibility:hidden;
}

Firefox doesn't always like this rule, instead I'd do this:

.clearfix {
  overflow: auto;
}

Or alternatively, just give it a height so it doesn't infer line-height:

.clearfix:after {
  clear:both;
  content:" ";
  display:block;
  font-size:0;
  height:1px;
  visibility:hidden;
}