1

Добрый вечер, уважаемое сообщество. Возникла следующая проблема - есть горизонтальное меню (код ниже), а точнее два. Построены по одному принципу. Когда пытаюсь масштабировать сайт в Opera и (кто бы мог подумать) IE9 - все нормально, меню увеличивается\уменьшается без проблем вместе со всем сайтом. Но в Chrom'е и Firefox последний элемент перескакивает на новую строку, соответственно ломается структура, съезжает в сторону слайдер, что под меню. Помогите, пожалуйста советом. Буду очень признателен.

Вот, собственно, и код:

Стандартная структура меню:

<nav id="menu1">
<ul>
    <li class="w0 current"><a href="#">Главная</a></li>
    <li class="w1"><a href="#">О нас</a></li>
    <li class="w2"><a href="#">Услуги</a></li>
    <li class="w3"><a href="#">Портфолио</a></li>
    <li class="w4"><a href="#">Контакты</a></li>
</ul>
</nav>

И CSS разметка (не судите строго - учусь))

#menu1 {
    background: url("images/menu/top_menu/tab.jpg") repeat-x;
    height: 60px;
    margin: 0px auto;
    min-width: 1020px;
    position: relative;
    right: 23px;
    top: 71px;
    width: 1020px;
}
#menu1 ul {
    list-style: none;
}
#menu1 li {
    background: url (images /menu /top_menu /tab.jpg) repeat-x;
    display: block;
    float: left;
    list-style: none;
}
#menu1 li a {
    border-right: 1px solid black;
    color: #fff;
    display: block;
    float: left;
    font-size: 18px;
    height: 40px;
    padding-top: 19px;
    text-align: center;
    text-decoration: none;
}
#menu1 li a:hover {
    background: url("images/menu/top_menu/hover_tab.jpg") repeat-x;
    color: #fff;
}
#menu1 li.current a {
    background: url("images/menu/top_menu/current_tab.jpg") repeat-x;
    display: block;
    float: left;
}
#menu1 li.current a:hover {
    background: url("images/menu/top_menu/hover_tab.jpg") repeat-x;
}
#menu1 li.w0 a,
#menu1 li.w1 a,
#menu1 li.w2 a,
#menu1 li.w3 a {
    width: 203px;
}
3
  • 1
    дайте лучше ссылку на саму страницу
    – Lucky
    Commented 25 сент. 2012 в 21:14
  • это на локалхосте. возможно, если не будет вариантов, то придется загрузить на хостинг и показывать) Commented 26 сент. 2012 в 8:44
  • так уж эти браузеры устроены и этого не изменить.
    – Arteom
    Commented 3 окт. 2012 в 13:01

5 ответов 5

3

Очень странно, только что у себя скопировал и запустил, все нормально ресайзится. Можно немного больше данных? Какие версии Chrome и Firefox и какая ОС?

Вот скрин Chrome. В FF все так же.

1
  • спасибо, что проверили) Хром у меня 21, Лиса 13. возможно, дело в бордерах по краях li a блоков. но я коменсировал еменьшением ширины, так что все уравновешено. Commented 26 сент. 2012 в 8:45
3
  1. Слишком много лишнего кода у вас.
  2. Вы какой-нибудь resetter подключали?
  3. Зачем всё время используете float: left;? Он может перебить вам весь стиль.
  4. display: block; поставьте только для ссылки, а для li не нужно.

Мой совет вам — скачайте с интернета какую-нибудь готовую реализацию горизонтального меню и посмотрите её код.

Лично я для такого меню обычно назначаю тэгу li свойство display: inline-block;.

0

Доктайп какой? Если 4.01, попробуй 5.

0

Настало время полюбить

<div></div>

которые спасают от подобного и не только рода ситуаций.

0

а вы случайно не забыли прописать в head

<meta name="viewport" content="width=device-width, initial-scale=1">

когда то сам забыл.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.