Проблемы с горизонтальным меню

[Sergaua]

Люди добрые, нужна Ваша помощь.

Со вчерашнего вечера ломаю 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;

}

[jumancy]

оставляем вариант 1, только уменьшаем падинг на 1 пик

div.navigation ul li a{
        padding: 0 23px;
}

Edited August 2, 2011 by jumancy

[Sergaua]

оставляем вариант 1, только уменьшаем падинг на 1 пик

div.navigation ul li a{
        padding: 0 23px;
}

пробовал менять пэдинги и так, и сяк, но проблема не ушла в Хроме на 57% уходит последний блок вниз.

посмотрите как аккуратно получается в ИЕ9, вот такой результат хотел бы получить в Хроме и ФФ.

(пэдинг на 1 пик уменьшил)

[ruslan.savenok]

C Вашим вариантом у меня вообще вышло 200 пикселей лишних 781 - (103 + 20 + 20) - (109 + 20 + 20) - (235 + 20 + 20) - (114 + 20 + 20) - (220 + 20 + 20) = -200

Советую написать фиксированный ul и не задавать пунктам меню ширину, последнему li добавьте класс .last и css код

.last {padding-right: 0;}

таким образом у вас будет запас в 20 пикселей, чего хватит любому браузеру что бы одолеть проблемы масштабирования.

Можно поставить

ul {overflow: hidden;}

но такой вариант я люблю меньше.

[jumancy]

оставляем вариант 1, только уменьшаем падинг на 1 пик

div.navigation ul li a{
        padding: 0 23px;
}

пробовал менять пэдинги и так, и сяк, но проблема не ушла в Хроме на 57% уходит последний блок вниз.

посмотрите как аккуратно получается в ИЕ9, вот такой результат хотел бы получить в Хроме и ФФ.

(пэдинг на 1 пик уменьшил)

Значит больше надо уменшать, начните с 15 или 20 и смотрите как себя ведут броузеры и остановитесь на оптимальном размере

[Sergaua]

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