Проблема с установкой анимированной навигации

В общем суть в чем. Хотели сделать анимацию кнопок при наведение. Начали работать на тестовике.

Но возникла проблема, все было сделано по рецепту из этой темы: http://help.forum2x2.ru/t10539-topic
Но почему то выглядит это все не так, как хотелось бы. Смотрите здесь: http://test-stalker-cop.forum2x2.ru/

(Наведите на кнопку "Главная")

UP

UP

Стал, ты меня извини, если я не права, но у Даны в туториале написано, что ВСЕ кнопки д.б. одинакового размера, а у тебя на тестовом не так, попробуй сделать все точно  

@Sunnyta пишет:Стал, ты меня извини, если я не права, но у Даны в туториале написано, что ВСЕ кнопки д.б. одинакового размера, а у тебя на тестовом не так, попробуй сделать все точно  

Сделал все кнопки одинакового размера, ничего не поменялось, все равно какой то баг при наведении.

@Чистый сталкер пишет:
Сделал все кнопки одинакового размера, ничего не поменялось, все равно какой то баг при наведении.

Цитирую

Дана пишет:margin-top:-37px
нужно изменить вручную, они должны быть равны высоте вашей кнопки:

Половинка твоей кнопки - 31px
 

@Sunnyta пишет:
Цитирую

Половинка твоей кнопки - 31px
 

Я указал в настроках CSS свою ширину. Это не должно никак влиять.

CSS про меню на твоем тестовике я вижу только это... если так, то это не весь код  

Код:

.mainmenu {
    display: -moz-inline-stack;
    height: 31px;
    overflow: hidden;
    vertical-align: top;
}
a.mainmenu img {
    margin-top: -31px;
}
a.mainmenu img:hover {
    margin-top: 0;
}

@Sunnyta пишет:CSS про меню на твоем тестовике я вижу только это... если так, то это не весь код  

Код:

.mainmenu {
    display: -moz-inline-stack;
    height: 31px;
    overflow: hidden;
    vertical-align: top;
}
a.mainmenu img {
    margin-top: -31px;
}
a.mainmenu img:hover {
    margin-top: 0;
}

У меня стоит это:

Код:

.mainmenu {
display:inline-block;
height:31px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:-31px;
}
a.mainmenu img:hover{
margin-top: 0px;
}

Каскадная таблица стилей CSS - Опции CSS - Оптимизировать вашу CSS: нет
стоит такое?

@Чистый сталкер пишет:
У меня стоит это:

Код:

.mainmenu {
display:inline-block;
height:31px;
overflow:hidden;
vertical-align: top;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}
a.mainmenu img {
margin-top:-31px;
}
a.mainmenu img:hover{
margin-top: 0px;
}

Еще раз пересмотрела, точно все так, как надо  

Да, все так стоит. Оптимизации CSS нет. Пусть ответит автор туториала, почему он не работает, как нужно.

Автор туториала установила образец кнопки http://savepic.org/4152413m.png (с высотой одной кнопки в 31px) по указанному туториалу

себе на теcтовик: http://calidasa.mirbb.net/forum

Парадоксально, но на чистой CSS все работает как нужно:


Поэтому автор туториала предлагает проделать следующее:
1) вырезать из персональной CSS все, что не касается указанного фрагмента настроек меню навигации
2) посмотреть, как после этого будут работать кнопки

@Dana Domirani пишет:Автор туториала установила образец кнопки http://savepic.org/4152413m.png (с высотой одной кнопки в 31px) по указанному туториалу

себе на теcтовик: http://calidasa.mirbb.net/forum

Парадоксально, но на чистой CSS все работает как нужно:


Поэтому автор туториала предлагает проделать следующее:
1) вырезать из персональной CSS все, что не касается указанного фрагмента настроек меню навигации
2) посмотреть, как после этого будут работать кнопки

Наконец вы ответили, спасибо. Без персональной CSS кнопки работают идеально. Но почему они работают не так, как должно быть с персональной CSS я не знаю.

Но почему они работают не так, как должно быть с персональной CSS я не знаю.

Можно установить опытным путем: как я уже говорила, вырезаете из персональной CSS все, что не относится к туториальной настройке кнопок меню. Сохраняете CSS так. После этого возвращаете по небольшому фрагменту персональных настроек обратно, сохраняете и смотрите, как добавленный кусок повлиял на кнопки. Если они сбились — значит, проблема обнаружена. Если всё в порядке — добавляете следующий кусок. И так, пока не найдете источник сбоя.

@Dana Domirani пишет:
Можно установить опытным путем: как я уже говорила, вырезаете из персональной CSS все, что не относится к туториальной настройке кнопок меню. Сохраняете CSS так. После этого возвращаете по небольшому фрагменту персональных настроек обратно, сохраняете и смотрите, как добавленный кусок повлиял на кнопки. Если они сбились — значит, проблема обнаружена. Если всё в порядке — добавляете следующий кусок. И так, пока не найдете источник сбоя.

Нашел, проблема в этом куске. Но что именно я не знаю.

Код:

/* HEADER------------------------------------------------------*/

#pun-intro{background: transparent url(http://last-emission.ucoz.net/shapka/3.png) no-repeat left;
height: 434px;
width: 953px;
position: relative;
padding-bottom: 250px !important;
top: -px;
padding-right: 0px;}

#pun-title{
color: white !important;
position: absolute !important;
top: 30px;
float: left !important;
text-align: left !important;
font-size: 20px;
font-weight: bold;
text-shadow: black 1px 1px 5px;
margin-left: 0px;}

#pun-desc{
color: white !important;
position: absolute !important;
top: 50px;
float: left !important;
text-align: left !important;
text-shadow: black 1px 1px 5px;
margin-left: 35px;}

#pun-logo {margin-top: 230px;
margin-left: 65px;}
#pun-head #pun-navlinks{
z-index: 999;
height: 25px;
position: relative;
top: -144px;
width: 920px;
padding: 0px;}

#pun-head #pun-navlinks li a{
margin: 0 0px 0 0;
color: white;
font-weight: bold;
position: relative;
top: 3px;
text-shadow: black 1px 1px 5px;
padding-right: 5px;
padding-left: 5px;
font-size: 11px;}

#pun-navlinks ul {text-align: center;}

#pun-head #pun-navlinks li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;

padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

#pun-head #pun-navlinks a[href="/profile.forum?mode=register"]{background: #4a382c;
background-image:url("http://i34.servimg.com/u/f34/13/98/22/00/bg-cen10.jpg");
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
border: 2px solid white;
-moz-box-shadow: 0px 0px 5px #0c0c0c;
-webkit-box-shadow: 0px 0px 5px #0c0c0c;
box-shadow: 0px 0px 5px #0c0c0c;}
#i_icon_mini_new_message{margin-bottom: -5px;}

#hitskin_preview {display: none!important; height:0px!important; } * html #hitskin_preview { display:none!important; height:0px!important;}


/* HEADER-END------------------------------------------------------*/

К сожалению из него я не могу вырезать по отдельности разные части кода, т.к. не видно кнопок после этого.

Попробуйте выбросить совсем вот это:

Код:

#pun-head #pun-navlinks li a:hover{
text-shadow: black -1px -1px 3px;
text-decoration: none;
height: 29px;

padding: 5px;
padding-top: 10px;
padding-bottom: 12px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}

Это настройки для текстовых кнопок при наведении на них курсора. Скорее всего, лишние внутренние отступы и сбивают кнопки.

Огромное спасибо, помогло!

Не за что!