За последние 24 часа нас посетили 60959 программистов и 1744 робота. Сейчас ищут 978 программистов ...

list-style - косяк в IE

Тема в разделе "HTML и CSS", создана пользователем tp-20, 30 ноя 2011.

  1. tp-20

    tp-20 Активный пользователь

    С нами с:
    20 ноя 2011
    Сообщения:
    34
    Симпатии:
    0
    Ребята помогите разобраться.

    Сайт http://www.svadebki.net
    Сделал вертикальное выпадающее меню на списке <ul> <li> ... </li> </ul> - такого вида.
    Во всех браузера читает правильно (скриншоты прикладываю) - FF, Opera, Chrome - отображают правильно, IE - как всегда подводит.

    Выкладываю CSS код (я так думаю что вся проблема в display: block потому что когда его убирал - в IE отображалось приближённо верно, но в других браузерах структура полностью рушилась)

    На этом скриншоте - неверно отображающийся список в IE
    [​IMG]

    А здесь - всё правильно - в мозилле
    [​IMG]

    Извините, кода много, но ничё нельзя выбросить.
    CSS код
    Код (Text):
    1. /*Вертикальное выпадающее меню*/
    2.   li {
    3.     list-style:url(/images/galka.png)  outside;
    4. }
    5.  
    6. ul#set-v,
    7. #set-v li {
    8.   margin: 5px;
    9.   border: 0 none;
    10.   padding: 0;
    11.   width: 150px;
    12.     background:none;
    13.     height:24px;
    14. }
    15.  
    16. #set-v a {
    17. font-family:Tahoma, sans-serif;
    18. font-size:14px;
    19. font-weight: normal;
    20. }
    21.  
    22. #set-v ul {
    23.   margin: 0;
    24.   border: 0 none;
    25.   padding: 0;
    26.   width: 130px;
    27. background:none;
    28. }
    29.  
    30.  
    31. /*ul#set-v li a:before {
    32.   clear: both;
    33.   content: url(/images/galka.png) "  ";
    34.   height: 0;
    35. }*/
    36.  
    37. ul#set-v li {
    38.   float: left;
    39.   display: block !important;
    40.   display: inline;
    41.   position: relative;
    42.     display: marker;
    43.     padding-left:14px;
    44. }
    45.  
    46.  
    47. ul#set-v a {
    48.     padding: 0;
    49.     margin: 3px;
    50.     display: list-item;
    51.     color: #006;
    52.     text-decoration: none;
    53.     vertical-align:middle;
    54. }
    55.  
    56.  
    57. ul#set-v a:hover,
    58. ul#set-v li:hover a,
    59. ul#set-v li.iehover a {
    60.   background: none;
    61.   color: #06C;
    62.     text-decoration:underline;
    63.     padding:0;
    64.     font-weight:bold;
    65.     font-size:12px;
    66. }
    67.  
    68. ul#set-v li li {
    69. margin:1px;
    70. padding:0;
    71. list-style:none;
    72. border: #92A7E7 solid 1px;
    73. height:37px;
    74. }
    75.  
    76. ul#set-v li:hover li a,
    77. ul#set-v li.iehover li a {
    78.     background-color:#EDF1FC;
    79.     color: #006;
    80.     text-decoration:none;
    81.     margin:0;
    82.     height:31px;
    83.     padding:3px;
    84. }
    85.  
    86. ul#set-v li:hover li a:hover,
    87. ul#set-v li:hover li:hover a,
    88. ul#set-v li.iehover li a:hover,
    89. ul#set-v li.iehover li.iehover a {
    90.     background-color: #6092EE;
    91.     padding:0 0 1px 0;
    92.     margin:0;
    93.     color: #FFF;
    94.     padding:3px;
    95.     box-shadow:         0 0 10px 4px #FFFDCC;
    96.     -moz-box-shadow: 0 0 10px 4px  #FFFDCC;
    97.     -webkit-box-shadow: 0 0 10px 4px  #FFFDCC;
    98.     -o-box-shadow: 0 0 10px 4px  #FFFDCC;
    99. }
    100.  
    101. ul#set-v ul {
    102.   display: none;
    103.   position: absolute;
    104.   top: 0;
    105.   left: 160px; /* Отступ выпадающего меню из пункта Ваше мероприятие */
    106. }
    107.  
    108.  
    109. ul#set-v ul ul {
    110.   display: none;
    111.   position: absolute;
    112.   top: 0;
    113.   left: 150px;
    114. }
    115.  
    116.  
    117. ul#set-v li:hover ul ul,
    118. ul#set-v li.iehover ul ul {
    119.   display: none;
    120. }
    121.  
    122. ul#set-v li:hover ul,
    123. ul#set-v ul li:hover ul,
    124. ul#set-v li.iehover ul,
    125. ul#set-v ul li.iehover ul {
    126.   display: block;
    127. }
    Выкладываю также HTML код, хотя думаю он не нужен, но на всякий случай:

    HTML код
    Код (Text):
    1. <div class="SideBarMenuApplestyle">
    2.  
    3. <div id="ddsidemenubar" class="markermenu">
    4.  
    5. <ul id="set-v">
    6.  
    7. <li><a href="#1">Ваше мероприятие</a>
    8.     <ul>
    9. <li class="<?=$wedd;?>"><a href="/holiday/wedd.php">Свадьба</a></li>
    10. <li class="<?=$yubiley;?>"><a href="/holiday/yubiley.php">Юбилей / День рождения</a></li>
    11. <li class="<?=$vipusk;?>"><a href="/holiday/vipusk.php">Выпускной</a></li>
    12. <li class="<?=$newyear;?>"><a href="/holiday/newyear.php">Новый год</a></li>
    13. <li class="<?=$profi;?>" ><a href="/holiday/profi.php">Другие праздники</a></li>
    14.     </ul></li>
    15.  
    16. <li class="<?=$audio;?>"><a href="/navy/audio.php">Наши записи</a></li>
    17. <li class="<?=$apparat;?>"><a href="/navy/apparat.php">Наша аппаратура</a></li>
    18. <li class="<?=$photo;?>"><a href="/navy/photo.php">Фотогалерея</a>
    19.  
    20.  
    21. </ul>
    22.  
    23. </div></div>

    Ну ещё советовали вставить такую ява-фишку, специально для IE: (не помогла)

    JAVA:
    Код (Text):
    1. <script type="text/javascript" language="javascript">
    2. navHover = function() {
    3.         var lis = document.getElementById("set-v").getElementsByTagName("LI");
    4.         for (var i=0; i<lis.length; i++) {
    5.                 lis[i].onmouseover=function() {
    6.                         this.className+=" iehover";
    7.                 }
    8.                 lis[i].onmouseout=function() {
    9.                         this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    10.                 }
    11.         }
    12. }
    13. if (window.attachEvent) window.attachEvent("onload", navHover);
    14. </script>
    Может есть какое-то универсальное решение на этот счёт?