При изменении разрешения экрана сьезжает верхнее меню вниз

[rubon]

Всем доброго дня. столкнулся с такой проблемой, при изменении разрешения экрана съезжают ссылки из меню в низ, и при этом страдает модуль категории. он сдвигается вправо. Весь день сижу, пытаюсь вылечить, не получается. Помогите знающие люди. Шаблон у меня резиновый.

В прикреплённых скрин нормального отображения, и как съезжает.

[Tom]

А автор темы Bigshop не в курсе,что не так с его шаблоном?

 

http://xn--90aycgp.xn--p1ai/

[rubon]

Походу не в курсе :-D

[rubon]

 

как вариант подправить отступами

75 строка

#menu > ul > li > a {
 font-size:13px; 
color: #fff; 
line-height:40px; 
text-decoration: none; 
display: block; 
padding:0px 5px 0px 5px; <----------
z-index: 1009; 
position: relative; 
font-weight:bold; 
}

Всё это есть. Вот из моего css меню

 

/* menu */

#menu { background:url(../image/menu.png) left top repeat #444; margin-bottom:15px; height:40px; padding:0px 5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

li.home { margin:0 0 0 5px; }

li.home a { display:block; height:35px!important; line-height:35px!important; padding:5px 5px 0 5px!important; }

li.home a span { background:url(../image/home-icon.png) center center no-repeat; display:block; width:30px; height:30px; text-indent:-9999px; }

#menu ul { list-style: none; margin: 0; padding: 0;}

#menu > ul > li { position: relative; float: left; z-index:1010; padding:0px 5px 0px 0px; }

#menu > ul > li > a { font-size:13px; color: #fff; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; }

#menu > ul > li:hover > a {color:#fff; background:#F15A23; }

#menu > ul > li > div { display: none; background:#F15A23; position: absolute; z-index:1008; padding: 5px; border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px;}

#menu > ul > li:hover > div { display: table; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); }

#menu > ul > li > div > ul { display: table-cell; }

#menu > ul > li ul + ul { padding-left: 20px; }

#menu > ul > li ul > li > a {background:url(../image/bullet-1.png) -10px center no-repeat; text-decoration: none; font-size:12px; padding:4px; display: block; white-space: nowrap; min-width: 120px; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s}

#menu > ul > li ul > li > a:hover {background:url(../image/bullet-1.png) right center no-repeat; font-weight:bold; -moz-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}

#menu > ul > li > div > ul > li > a { color:#fff; }

[rubon]

А если приглядеться? 

 

Да я делал по 5px. Проблема не исчезает, всё равно начинаешь уменьшать экран, всё съезжает.  думал прикрутить туда overflow-x: hidden, этот вариант устраивает, чтобы просто не показывались там категории которые не влезают, но при этом меню перестает раскрываться =))))

[rubon]

Не вариант. Суть вся в этой резинке. Неужели ни как не разрулить этот вопрос.

в стилях есть такой файлик ещё autocomplete.css

там

#searchField {
    width: 200px;    
}
#results {
    max-height:325px;
    overflow:auto;
    font-size:14px;
    font-family: Arial, Helvetica, sans-serif;
    padding:5px 0px;
    display: none;
    z-index:9999;
    background-color:#fff;
    border:1px solid #ccc;
    box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
    width:480px!important;
}
#results div {
    padding:0px;
}
#results .selected {
    background-color:#eee;
    padding:3px 12px;
    cursor:default;
}
#results .unselected {    
    color: #222;
    padding:3px 12px;
}
@media screen and (max-width:1024px) {
#results{width:480px!important;}
}
@media screen and (max-width:768px) {
#results{width:91%!important;}
}
@media screen and (max-width:320px) {
 }
@media screen and (max-width:480px) {

#results{width:87%!important;}
}

 

может здесь стоит искать решение???!

[rubon]

а как бы прописать чтобы если не влезает меню справа, то оно расширялось в низ на 40px  и переносились бы  тогда туда ссылки??

[rubon]

в итоге сделал чтобы при разрешении экрана меньше 1025px в ширину, меню имело стиль overflow-x: hidden. и строку поиска подредактировал чтобы не заезжала на меню

[rubon]

И снова проблема. На сей раз с отображение в IE. Модуль на главной при уменьшении экрана съезжает в низ. В мазиле всё отлично отображается а IE как всегда проблем создает. Помогите зафиксить это.

в прикреплённых скрин, или посмотрите на сайте рубон.рф . Нужно уменьшать размер экрана в IE и модуль убегает