Sergaua

Наконец-то, я получил желаемый результат. Всем участникам огромное спасибо.

пробовал менять пэдинги и так, и сяк, но проблема не ушла в Хроме на 57% уходит последний блок вниз. посмотрите как аккуратно получается в ИЕ9, вот такой результат хотел бы получить в Хроме и ФФ. (пэдинг на 1 пик уменьшил)

Люди добрые, нужна Ваша помощь. Со вчерашнего вечера ломаю head над header'ом. В горизонтальном меню, которое в идеале должно выглядеть так: при масштабировании возникает обрыв последнего блока меню на следующую строку. В первом варианте только ИЕ9 отображает меню именно так как я хочу. - см. тут Во втором варианте - когда я установил фиксированную ширину li, контент ячейки лезет вниз - и тут Помогите!!! Вариант 1 HTML: <div id="header"> <div id="innerHeader"> <img class="logo" src="images/logo.png" width="175" height="49" alt="Мир насосов"> <img class="slogan" src="images/slogan.png" width="781" height="27" alt="Наш девиз"> <div class="navigation"> <ul> <li><a href="/" class="first">Главная</a></li> <li><a href="/">Новости</a></li> <li><a href="/">Техническая документация</a></li> <li><a href="/">Контакты</a></li> <li><a href="/" class="last">Запрос на подбор насоса</a></li> </ul> </div> </div> </div><!-- #header--> CSS: /* Header —————————————————————————--*/ #header { height: 63px; background: transparent; outline: 1px solid #900; } #innerHeader { width: 100%; height: 63px; position: relative; } .logo { position: absolute; top: 11px; left: 112px; } .slogan { position: absolute; top: 0px; left: 309px; } #innerHeader div.navigation{ position: relative; top: 27px; left: 309px;; width: 781px; height: 36px; outline: 0px solid green; background: url(../images/menu_pt.gif) top left repeat-x; } div.navigation ul{ position: relative; list-style-type: none; width: 741px; height: 36px; overflow: hidden; padding: 0 20px; } div.navigation ul li { float: left; -moz-box-sizing: border-box; /* Для Firefox */ -webkit-box-sizing: border-box; /* Для Safari и Chrome */ box-sizing: border-box; /* Для IE и Opera */ } div.navigation ul li a{ display: block; height: 36px; padding: 0 24px; float: left; text-transform: uppercase; font: 12px/36px Arial, sans-serif; color: #ffffff; text-decoration: none; text-align: center; } div.navigation ul li a.first{ padding-left: 0px; } div.navigation ul li a.last{ padding-right: 0px; } Вариант 2: HTML: <div id="header"> <div id="innerHeader"> <img class="logo" src="images/logo.png" width="175" height="49" alt="Мир насосов"> <img class="slogan" src="images/slogan.png" width="781" height="27" alt="Наш девиз"> <div class="navigation"> <ul> <li class="first"><a href="/">Главная</a></li> <li class="second"><a href="/">Новости</a></li> <li class="third"><a href="/">Техническая документация</a></li> <li class="fourth"><a href="/">Контакты</a></li> <li class="fifth"><a href="/">Запрос на подбор насоса</a></li> </ul> </div> </div> </div><!-- #header--> CSS: #header { height: 63px; background: transparent; outline: 1px solid #900; } #innerHeader { width: 100%; height: 63px; position: relative; } .logo { position: absolute; top: 11px; left: 112px; } .slogan { position: absolute; top: 0px; left: 309px; } #innerHeader div.navigation{ position: relative; top: 27px; left: 309px;; width: 781px; height: 36px; outline: 0px solid green; background: url(../images/menu_pt.gif) top left repeat-x; } div.navigation ul{ position: relative; list-style-type: none; width: 781px; } div.navigation ul li { float: left; padding: 0 21px; -moz-box-sizing: border-box; /* Для Firefox */ -webkit-box-sizing: border-box; /* Для Safari и Chrome */ box-sizing: border-box; /* Для IE и Opera */ } div.navigation ul li.first { width: 103px; } div.navigation ul li.second { width: 109px; } div.navigation ul li.third { width: 235px; } div.navigation ul li.fourth { width: 114px; } div.navigation ul li.fifth { width: 220px; } div.navigation ul li a{ display: block; height: 36px; float: left; text-transform: uppercase; font: 12px/36px Arial, sans-serif; color: #ffffff; text-decoration: none; text-align: center; }