Прощу помощи с версткой выпадающего меню под 6 и 7 осла

Тема в разделе "Другие языки", создана пользователем funest, 8 окт 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Сайт - http://clickit.jobsfr.com/, на нем выпадающее меню, которое нормально работает в лисе, опере и 8ie. В 7 невозможно навести курсор на выпадающее меню (сразу исчезает, как убираешь с кнопки). Второй косяк, это исчезающий первый пункт в выпадающем меню, если несколько раз наводить на кнопку курсор, то он появляется, то пропадает.
    С шестым вообще ужас, но мне хоть у седьмого верстку поправить.
    Вот код меню
    Код:
    #top_menu{position:absolute; bottom:0; right:0; z-index:10;}
    #top_menu ul{list-style-type:none; margin-right:13px; position:relative;}
    #top_menu ul li{float:left; line-height:55px; margin:10px 0 0 1px; position:relative;}
    #top_menu ul li ul{display:none; position:absolute; top:50px; left:0; width:300px; z-index:100;}
    #top_menu ul li ul li{background:url(../images/menu_li_bg.png) repeat-y; line-height:25px; margin:0; padding:5px 0; float:none;}
    #top_menu ul li ul li:hover{background:url(../images/menu_li_bg_hover.png) repeat-y;}
    #top_menu ul li ul .item13, #top_menu ul li ul .item16{background:url(../images/menu_li_top.png) no-repeat bottom !important; height:7px;}
    #top_menu ul li ul .item14, #top_menu ul li ul .item21{background:url(../images/menu_li_bottom.png) no-repeat top !important; height:7px;}
    #top_menu ul li ul li:hover{line-height:25px;margin:0 !important;}
    #top_menu ul li ul li a, #top_menu ul li ul li a:hover, #top_menu ul li ul li a span, #top_menu ul li ul li a:hover span, #top_menu ul li:hover ul li a span, #top_menu ul .active:hover ul li a span, #top_menu ul li:hover ul li a, #top_menu ul .active:hover ul li a, #top_menu ul  .parent:hover ul li a, #top_menu ul  .parent:hover ul li a span{background:none !important; line-height:25px !important;}
    #top_menu ul li ul li a:hover span{color:#374B79}
    #top_menu ul li ul .active{margin:0 !important;}
    #top_menu ul li:hover, #top_menu ul .active {line-height:65px; margin:0 0 0 1px;}
    #top_menu ul li:hover ul{display:block;}
    #top_menu ul li a, #top_menu ul  .parent span, #top_menu ul  .parent a{color:#fff; text-decoration:none; font-size:16px; background:url(../images/bt.png) no-repeat; display:block;}
    #top_menu ul li a:hover, #top_menu ul .active a, #top_menu ul li:hover a, #top_menu ul .active:hover a, #top_menu ul  .parent:hover span, #top_menu ul  .parent:hover a, #top_menu ul  .active .separator{background:url(../images/bt_hover.png) no-repeat !important;}
    #top_menu ul li a span, #top_menu ul  .parent span span, #top_menu ul  .parent a span{display:block; background: url(../images/bt_r.png) no-repeat right top; padding-right:23px; margin-left:24px;}
    #top_menu ul li a:hover span, #top_menu ul .active a span,  #top_menu ul li:hover a span,  #top_menu ul .active:hover a span, #top_menu ul  .parent:hover span span, #top_menu ul  .parent:hover a span, #top_menu ul  .active .separator span {background:url(../images/bt_r_hover.png) no-repeat right top !important;}
    
    Буду благодарен за любую наводку, своя думалка уже сломалась.
     
  2. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    613
    Симпатии:
    477
    Там получается дополнительный зазор, видимо высота получается больше чем 7px. Попробуйте item13 item14 в которые вставлены маленькие картинки формирующие радиуса дописать font-size: 0px; так как IE иногда не может сделать высоту 7px пока font-size: 0px не поставишь.
    Код:
    #top_menu ul li ul .item13, #top_menu ul li ul .item16 {
    	background:url(../images/menu_li_top.png) no-repeat bottom !important;
    	height:7px;
    	font-size: 0px;/* Добавлено */
     
  3. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Дописал, не помогло :confused:
     
  4. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    613
    Симпатии:
    477
    Может HasLayout не включается на этих блоках попробуйте здесь пока закоментируйте /*line-height:25px;*/ и /*padding:5px 0;*/
    #top_menu ul li ul li {
    background:url("../images/menu_li_bg.png") repeat-y scroll 0 0 transparent;
    float:none;
    /*line-height:25px;*/
    margin:0;
    /*padding:5px 0;*/
    zoom: 1;
    }
    и допишите zoom: 1 к этим li

    Вот этому блоку который их содержит zoom: 1 попробуйте #top_menu ul li ul хотя на нём position:absolute; и HasLayout должен включится, но на всякий случай, пока тестируете.

    font-size: 0px оставьте хуже не будет, пока отлаживаете.
    Я бы и сам попробовал но у меня IETester почему то на Win 7 64-bit не показывает локальные файлы, а если вставить ссылку из интернета то сайт грузит и я вижу что происходит, а проверить свои изменения пока не могу.
     
    funest нравится это.
  5. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Спасибо, никогда бы не додумался использовать zoom.
    Осталось 6 добить )))
    У меня тоже на win 7 ietester не показывает локальные файлы.
     
  6. Kub

    Kub

    Регистр.:
    5 июн 2009
    Сообщения:
    613
    Симпатии:
    477
    Теперь zoom: 1; можно на position:relative; заменить, position:relative; то же должно включить HasLayout но страница будет проходить валидацию. Я обычно zoom: 1; для отладки использую, а потом стараюсь стандартными свойствами добиться того же эфекта.
    С IE6 уже сложнее, там вообще всё смещено капитально. И li:hover в нём не будет работать, у него же :hover только на ссылках работает. Нужно или скриптом этот :hover на li как то прикручивать, или без скрипта но добавлять в условных коментариях отдельно для IE 6 код в виде таблице. То что я написал про добавление таблицы будет не совсем понятно, поэтому прикладываю файл с меню, посмотрите и сразу будет понятно. Правда код заграмождается сильно. Это придумал Stu Nicholls c cssplay.co.uk на его сайте много ещё меню интерестных есть.
    Вот оно rghost.ru
     
    funest нравится это.
Статус темы:
Закрыта.