Мой сайт не очень хорошо выглядит в Firefox

Question

Я работаю над веб-приложением, и мой код работает хорошо в Chrome и Explorer, но в Firefox это доставляет мне проблемы. я добавляю ссылку на скриншот, чтобы вы могли видеть, как выглядит меню (черные поля css должны быть под меню): ссылка для просмотра меню

это мой стиль css:

/ - Меню - /

#menu { height:39px; position:relative; float:right; margin-top:33px; background:url(../images/menu/bg.jpg) repeat-x; }
#menu-left { width:8px; height:38px; position:relative; z-index:10; float:left; background:url(../images/menu/menu-sx.jpg); }
##menu-right { width:8px; height:38px; position:relative; z-index:10; float:right; background:url(../images/menu/menu-dx.jpg); }

.menu-item { float:left; position:relative; z-index:100; cursor:pointer; }
#menu-name { float:left; padding-top:10px; padding-right:11px; font-size:10pt; color:#FFF; text-shadow:#001F2E 0px -1px; }

#menu-rollover-left { width:98px; height:38px; position:absolute; top:0; left:0; z-index:0; background:url(../images/menu/rollover-left.jpg); }
#menu-rollover-right { width:86px; height:38px; position:absolute; top:0; right:0; z-index:0; background:url(../images/menu/rollover-right.jpg); }

/*-- Menu labels --*/
.label { height:34px; position:absolute; top:103px; z-index:200; opacity:0; filter:alpha(opacity=0); }
.label-left { width:9px; height:34px; float:left; background:url(../images/menu/label-left.jpg); }
.label-right { width:9px; height:34px; float:left; background:url(../images/menu/label-right.jpg); }
.label-center { height:34px; float:left; background:url(../images/menu/label-center.jpg) center; }
.label-center span { position:relative; top:7px; font-size:8pt; color:#FFF; text-shadow:#000 0px -1px; }

/*-- Notifications flag --*/
#header a { text-decoration:none;}
#red-flag { width:27px; height:51px; position:absolute; top:33px; right:62px; z-index:300; background:url(../images/menu/red-flag.png); font-size:9pt; color:#FFF; text-shadow:#3B0001 0px -1px; text-align:center; line-height:67px; cursor:pointer; }

и это мой HTML-код:

<div id="menu">
     <div id="menu-left"></div>

        <a href="/doweets/index"><div id="home-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/home.jpg" /></div></a>
        <a href="/calendar/week"><div id="calendar-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/calendar.jpg" /></div></a>
        <a href="/findfriends"><div id="addfriends-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/addfriends.jpg" /></div></a>
        <div class="menu-item"><img src="/images/menu/line.jpg" /></div>

        <div id="menu-name"><%= current_user.name %></div>

        <a href="/notifications/index"><div id="notifications-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/notifications.jpg" /></div></a>
        <a href="/users/edit"><div id="settings-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/settings.jpg" /></div>
        <a href="/users/sign_out"><div id="logout-btn" class="menu-item" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);"><img src="/images/menu/logout.jpg" /></div></a>

        <div id="menu-right"></div>

        <!-- Rollover states -->
        <div id="menu-rollover-left"></div>
        <div id="menu-rollover-right"></div>
</div>



   <!-- Notifications flag -->
   <a href="/notifications/index"><div id="red-flag" onmouseover="RollMenu(this, event);" onmouseout="RollMenu(this, event);">
<%= count %>

<% if count == 0 %>
<script>$("#red-flag").css("display", "none");</script>
<% end %>

</div></a>

на некоторых страницах меню это вообще не работает. Спасибо вам всем. Nir.

Answer 1

Попробуйте что-то вроде этого:

HTML

<ul>
    <li><a href='#' alt='Back to the homepage'><img src='' alt='Home'><span>Home</span></a></li>
    <li><a href='' alt=''><img src='' alt=''/><span>Lorem</span></a></li>
</ul>

CSS

#menu { display:block; padding:0 0 0 5px; background:#ccc; }
#menu li { display:inline-block; padding:0 5px 0 0; height:20px; }
#menu li a { position:relative; }
#menu li a span { position:absolute; top:20px; }
#menu li a:link span,
#menu li a:visited span { display:none; }
#menu li a:hover span,
#menu li a:active span { display:block; }

Answer 2

Я думаю, что ваша проблема с разными элементами с position: relative и position: absolute. Трудно понять точно (особенно потому, что я не уверен, каким элементом должны быть черные ящики). Тем не менее, я вижу, что вы присваиваете элементы с position: relative z-индексом, который не работает. Я думаю, что происходит в том, что абсолютно позиционированные элементы опускают ваш маленький черный флаг в Chrome и IE, но не в Firefox. Если возможно, попробуйте конвертировать все в position: absolute - это помогло мне обойти проблемы FF, как это.

Кроме того, если бы вы дали URL, я уверен, что есть много людей, которые были бы рады поиграть с ним в firebug, пока он не будет исправлен.