Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > не отображает list-style-image в FF при наведении


Автор: Enya 11.6.2007, 14:44
вот делаю меню. всё просто. есть список элементов меню. при наведении у списка отображается картинка list-style-image, если не наведена мышь то не отображается.
В IE работает - а в FF нет. А нужно сами понимаете что бы показывалось одинаково.
Код

<table class="left-menu" width="205" border="0" cellpadding="0" cellspacing="0">
         <tr>
             <td valign="top">
                         <div class="left-menu-content">
                          <div class="MenuLeft">
                             <ul class="MenuList">
                              <li class="MenuListPosition"><a href="#" class="MenuListItem">One</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Two</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Thee</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">Next button</a></li>
                                <li class="MenuListPosition"><a href="#" class="MenuListItem">. . .</a></li>
                             </ul>
                            </div>
                         </div>
             </td>
         </tr>
        </table>
Код

table.left-menu{
    background-image: url(images/background-left-menu.jpg);
    background-position: top;
    background-repeat: no-repeat;
    width: 205px;
    padding: 0px;
    margin: 0px;
    /*height: 324px;*/
}
div.left-menu-content{
   /*border: 1px Solid red;*/
   background-color: #e1eafb;
    width: 190px;
    margin-top: 8px;
    margin-left: 7px;
    margin-right: 4px;
    margin-bottom: 0px; 
    /*height: 315px;*/
}
div.MenuLeft{
    border: 1px Solid red;
    margin: 0px;
    padding: 0px;
}
ul.MenuList{
    border: 1px Solid red;
    list-style-type: none;
    /*padding: 0px;
    margin: 4px 4px 4px 10px;*/
}
li.MenuListPosition{
 display: list-item;    
}
li.MenuListPosition a.MenuListItem:link, a.MenuListItem:active, a.MenuListItem:visited{
 list-style-type: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
li.MenuListPosition a.MenuListItem:hover{
 list-style-image: url(images/li_red.jpg);
 list-style-position: inherit;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}

Автор: Mymik 11.6.2007, 18:04
Enya, а с какого перепугу оно работает в IE ??? O_o
Оно вообще-то и там не должно работать. Потому как в 39 строчке написано, что ты переопределяешь класс MenuListItem. А этот класс относится для тэга "a"...
чес слово это странно... я не знал что у тэга "a" есть list-style-image...

Ну это. Переопредели еще для MenuListPosition:hover и тогда будет работать. 
hover в IE работает только для ссылок. А во всех остальных для любого элемента. Так что если ты переопределишь hover для MenuListPosition, то это не повлияет на браузер IE.

Автор: SelenIT 11.6.2007, 19:40
Цитата(Enya @  11.6.2007,  14:44 Найти цитируемый пост)
li.MenuListPosition a.MenuListItem:link, a.MenuListItem:active, a.MenuListItem:visited{

Enya, опять Вы задаете стиль обычной ссылки только для ссылок в нужных блоках, а стиль активной и посещенной - для любых... вроде ж совсем недавно наступали на эти грабли? ;)

Цитата(Mymik @  11.6.2007,  18:04 Найти цитируемый пост)
я не знал что у тэга "a" есть list-style-image...

По идее (и по http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image) оно есть у всего, для чего задано display:list-item - независимо от тега. Но для ссылок лично я предпочитаю "играть" с фоном, а не с рисунком маркера - его и менять проще, и точно позиционировать легче...

Автор: Enya 11.6.2007, 20:17
SelenIT, почему? Я же указала что для тех у кого класс MenuListItem, а не для всех?!

Добавлено через 26 секунд
и да, я тоже наверное лучше поиграюсь с фоном.

Автор: Mymik 12.6.2007, 09:51
Цитата(SelenIT @  11.6.2007,  19:40 Найти цитируемый пост)
Но для ссылок лично я предпочитаю "играть" с фоном, а не с рисунком маркера - его и менять проще, и точно позиционировать легче... 

+1
Тем более он позиционируется в разных браузерах по разному...

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)