Смешение текста в меню при масштабировании

[arm136]

Смешение текста  в меню при масштабировании

текст смешается   при  уменьшении размера страницы  в(opera,safari,chrome,IE)

пытался зафиксировать его  задав размер  списка  (.menu ul width 700px  height 42px )  и его элементов   ,

но выходит кривовато .прошу критики/совета .спасибо!)))

 

<div class="menu">
<ul class="menuul">
<li><a href="<?php echo $home; ?>">Главная</a></li>
<li><a href="<?php echo $category; ?>">Каталог товаров</a></li>
<li><a href="/">Доставка и Оплата</a></li>
<li><a href="/">Контакты</a></li>
<li><a href="/">Гарантии</a></li>
<li><a href="/">Помощь</a></li>
</ul>
</div>






.menu {
width: 980px; 
height: 44px; 
background: #565656;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


.menu ul {
padding: 0;  
margin: 0 auto;
border: 0;
}
.menu ul:before {
content: '';
display: block;
}
#menu ul:after {
content: '';
display: table;
clear: both;
}
/* menuul */
.menu li {  
    display: inline;  
    float: left;  
    border-right: 1px solid #000000;
    border-left: 1px solid #4f4f4f;
}
.menuul  a {
    display: block;
    float: left;
    font-family:Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;   
    text-decoration: none; 
     padding: 12px 20px;
    text-shadow: 1px 1px 0px #283744; 
}
.menuul li a {  
    box-sizing:border-box;  
    -moz-box-sizing:border-box;  
    -webkit-box-sizing:border-box;  
} 
.menu li:hover {
background: #444444;
background: -moz-linear-gradient(#444444 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));
background: -webkit-linear-gradient(#444444 0%, #323232 100%);
background: linear-gradient(#444444 0%, #323232 100%);
}
.menu li:first-child {
border-left: none;
-webkit-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}

[arm136]

решено.закройте тему

[AlexFisher]

еще одна тема ни о чем. Делитесь решением.

[arm136]

еще одна тема ни о чем. Делитесь решением.

решение простое  

 ul li {
margin: 0;
padding: 0;
float: left;
list-style: none;
background: none;
display: block;
width: 147px;
}

Змінено 16 червня 2014 користувачем AlexFisher
code

[AlexFisher]

Простое, сложное - кому-то поможет. 

Спасибо за участие.