Высота и верх.Отличия браузера

Question

Я работаю с шаблоном Drupal (подтема Zen). Я хочу добиться некоторого эффекта при наведении меню. Я попытаюсь объяснить это: Когда вы наводите курсор мыши на элемент меню, я хочу, чтобы изображение отображалось внизу <ul><li>. <ul><li> высота 30px; Поэтому, если вы наведите курсор мыши на первый пункт меню, вы увидите что-то вроде этого:

item item item item
||||

Это '||||' это изображение, отображаемое в нижней части <li> фона. Под этим графиком начинается содержание. Это в квадрате с другим, чем цвет фона страницы. Этот квадрат контента должен появляться в том же месте, где заканчивается изображение меню. Я надеюсь, что объяснил это достаточно хорошо (извините за мой ужасный английский)

Теперь к проблеме: Квадрат содержимого отображается прямо под меню только в FireFox и Opera. В других браузерах фоновое изображение появляется в квадрате контента (как и высота тега <li> не существует). Я пытался решить это, добавив top: 15px;, и это нормально в chrome, IE и т. Д., Но в FF и Opera у меня высота <li> плюс top: 15px; (так что сверху много места)

@ edit: вот код для меню

<div id="navigation"><div class="section clearfix">

        <h2 class="element-invisible">Menu główne</h2><ul id="main-menu" class="links inline clearfix"><li class="menu-390 first"><a href="/drupal-femini/gallery" title="">Gallery</a></li>
<li class="menu-394 active-trail active"><a href="/drupal-femini/node/15" class="active-trail active">Gallery2</a></li>
<li class="menu-339"><a href="/drupal-femini/node/1" title="Find out more">About</a></li>
<li class="menu-398 last"><a href="/drupal-femini/node/17">Contact</a></li>
</ul>

И CSS для меню:

#navigation ul.links, #navigation .content ul {
    margin: 0;
    padding: 0;
    text-align: left;
}

#main-menu {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-top: 5px;
}

#navigation ul.links li,
#navigation .content li {
    float: left; /* LTR */
    padding: 15px 10px 0 10px; /* LTR */
    height: 30px;
}

#navigation ul.links li:hover {
background: url(../images/menu_bg.png) repeat-x bottom;
}

CSS для контента:

#main-wrapper {
  position: relative;
  top: 14px;
}