Проблема с горизонтальной навигацией в Firefox - PullRequest
Новая
       32

Проблема с горизонтальной навигацией в Firefox

0 голосов
/ 24 июня 2011

Я проектирую веб-сайт (новичок), и я столкнулся с этой проблемой с горизонтальным меню навигации в Firefox, с которым я застрял.

Вот как это выглядит в последнем Safari, Chrome, Webkit (OS X): http://i.imgur.com/iMDyO.png

Вот как это выглядит в Firefox 5 (OS X): http://i.imgur.com/Bp4y0.png

Вот мой CSS, у меня были некоторые проблемы с использованием псевдоэлементов, поэтому концы "ленты" - это фоновое изображение 

.mod_menu {
width:940px;
height:50px;
background-image:url("tl_files/images/navbg.png");
background-repeat:repeat-x;
}

.mod_menu ul {
margin:10px 0 0 15px;
padding:0; 
}

.mod_menu li {
position:relative;
float:left;
border-right:1px solid #247db8;
list-style-type:none;
border-left: 1px solid #005c8e;
}

.mod_menu li a {
display:block;
padding:5px 25px;
font-family:Helvetica, Arial, sans-serif;
font-size:10pt;
color:#ffffff;
text-decoration: none;
text-shadow: 0px -1px 1px #092c47; 
}

Вот HTML: 

<div id="wrapper">
    <div id="header">
        <div class="inside">
            <div id="logo">
            <a href="/index.html">
                <img src="tl_files/images/logo_f.png" alt="Logo" />
            </a>
            </div>
            <div class="mod_quicklink block">
            <ul>
                <li><a href="kontakt.html">Kontakt</a></li>
                <li><a href="prihlaseni.html">Přihlášení</a></li>
                <li><a href="registrace.html">Registrace</a></li>
            </ul>
            </div>
            <div class="mod_navigation mod_menu block">
            <a href="#skipNavigation1" class="invisible">Přeskočit navigaci</a>
            <ul class="level_1">
                <li class="active first"><a href="index.html"  class="first">RL - Corpus</a>
                <img id="drop" src="tl_files/img/drop.png" alt="" /></li>
                <li class="sibling"><a href="novinky.html" title="Novinky" class="sibling">Novinky</a></li>
                <li class="sibling"><a href="zdravotnicka-cinnost.html" title="Zdravotnícka Činnost"                class="sibling">Zdravotnícka činnost</a></li>
                <li class="sibling"><a href="skolici-cinnost.html" title="Školíci Činnost" class="sibling">Školíci činnost</a></li>
                <li class="sibling"><a href="metoda-v-vojty.html" title="Metoda V. Vojty" class="sibling">Metoda V. Vojty</a></li>
                <li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last">Kontakt</a></li>
            </ul>
            <a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>
            </div>
        </div>
    </div>
</div>

Ответы [ 2 ]

1 голос
/ 24 июня 2011

Попробуйте добавить clear: left к классу .mod_menu .Ваш логотип всплывает влево, не очищая поплавки, тогда вы mod_menu попытаетесь продолжить в той же строке (по крайней мере, в Firefox).Я бы также порекомендовал Firebug.

0 голосов
/ 24 июня 2011

Вам нужно очистить ваши поплавки.

Добавление clear:both; в div с классом mod_navigation mod_menu block исправило его в firebug.

...