Добрый вечер, уважаемое сообщество. Возникла следующая проблема - есть горизонтальное меню (код ниже), а точнее два. Построены по одному принципу. Когда пытаюсь масштабировать сайт в 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;
}