Почему Firefox показывает дополнительную строку здесь?

Question

Старался изо всех сил удалить лишний пробел (или отступы, поля, что бы это ни было) с этой страницы в Firefox:

http://emctalk.com.au/

Видите меню? сравните это с chrome, и вы заметите, что меню находится слишком далеко под фоном, что делает макет неправильным.

В любом случае я попытался добавить line-height: 1px к элементу UL и затем убрать height на элементах LI, сделав их настолько маленькими, насколько это возможно.

На самом деле это выглядит нормально, но я чувствую, что это взлом. Мне интересно знать, в чем заключается настоящая проблема, чтобы я мог решить ее в будущем.

Если в любом случае есть какой-то совет о том, как это исправить, это будет с благодарностью. Я использую FF5 и последнюю версию Google Chrome.

Спасибо.

Answer 1

Измените следующее в вашем CSS:

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 150px;
    text-indent: -2000em;
}

до

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 140px; /*The height 150px causes the problem*/
    text-indent: -2000em;
}

Это должно решить проблему.

Answer 2

Используйте

#mainmenu {
float:left;
}

включите это в CSS и настройте фон в соответствии с пользовательским интерфейсом.

Answer 3

Проблема заключается в расчете высоты #mainmenu li, установленной как display:inline.Mozilla должна использовать 13px padding-top и padding-bottom для вычисления места размещения фонового изображения.

В Firebug я изменяю настройки отступов и высоты ниже, чтобы получить желаемый результат.

#mainmenu li {
    display: inline;
    float: left;
    height: 30px;
    padding-left: 30px;
    padding-top: 13px;
}