Joomla 1.0 CSS слой на передний план помогите....

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем infoman, 15.12.2008.

  1. infoman
    Offline

    infoman Пользователь

    Регистрация:
    28.08.2007
    Сообщения:
    581
    Симпатии:
    12
    Пол:
    Мужской
    Добрый день помогите пожалуйста
    проблема такова
    имеется шаблон
    имеется меню
    имеется форма
    имеется FF 3.0.3
    имеется стандартный осёл IE

    сайт http://www.gde-eda.ru/component/option,com_poll/Itemid,58/
    это для примера
    там форма выбора опросов....
    в общем если навести на на меню (пункт Полезная информация )
    то видим что выскакивающее меню сьедается списком выбора опросов...
    и так для любой формы .....
    в самом шаблоне меню css состоитт из этого файла :
    Код (CODE):
    1. #ja-cssmenu {
    2.     margin: 0; /* all lists */
    3.     padding: 0;
    4. }
    5.  
    6. #ja-cssmenu ul {
    7.     margin: 0; /* all lists */
    8.     padding: 0;
    9. }
    10.  
    11. #ja-cssmenu li {
    12.     margin: 0; /* all list items */
    13.     padding: 0;
    14.     float: left;
    15.     display: block;
    16.     background: none;
    17.     border-right: 1px solid #CCCCCC;
    18.     cursor: pointer;
    19. }
    20.  
    21. #ja-cssmenu li ul {
    22.     width: 16.4em;
    23.     position: absolute; /* second-level lists */
    24.     z-index: 99;
    25.     left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    26.     height: auto;
    27.     w\idth: 15.9em;
    28. }
    29.  
    30. #ja-cssmenu li ul ul {
    31.     margin: -2em 0 0 15em; /* third-and-above-level lists */
    32. }
    33.  
    34. #ja-cssmenu li li {
    35.     padding: 0 1em 0 0;
    36.     margin: 0;
    37.     width: 14.9em;
    38. }
    39.  
    40. #ja-cssmenu ul a {
    41.     width: 14.8em;
    42.     w\idth: 10.8em;
    43. }
    44.  
    45. #ja-cssmenu li:hover ul ul, #ja-cssmenu li:hover ul ul ul,
    46. #ja-cssmenu li.sfhover ul ul, #ja-cssmenu li.havechildsfhover ul ul, #ja-cssmenu li.havechild-activesfhover ul ul, #ja-cssmenu li.activesfhover ul ul,
    47. #ja-cssmenu li.sfhover ul ul ul, #ja-cssmenu li.havechildsfhover ul ul ul, #ja-cssmenu li.havechild-activesfhover ul ul ul, #ja-cssmenu li.activesfhover ul ul ul {
    48.     left: -999em;
    49. }
    50.  
    51. /* This "unhides" the sub-menus (left: -999em is what hides them) */
    52. #ja-cssmenu li:hover ul, #ja-cssmenu li li:hover ul, #ja-cssmenu li li li:hover ul,
    53. #ja-cssmenu li.sfhover ul, #ja-cssmenu li.havechildsfhover ul, #ja-cssmenu li.havechild-activesfhover ul, #ja-cssmenu li.activesfhover ul,
    54. #ja-cssmenu li li.sfhover ul, #ja-cssmenu li li.havesubchildsfhover ul, #ja-cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul,
    55. #ja-cssmenu li li li.sfhover ul, #ja-cssmenu li li li.havesubchildsfhover ul, #ja-cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul {
    56.     left: auto;
    57. }
    58.  
    59. /* STYLING THE MENU
    60. -----------------------------------*/
    61. /* 1st level */
    62. #ja-cssmenu li a {
    63.     display: block;
    64.     text-decoration: none;
    65.     padding: 4px 8px 3px;
    66.     color: #333333;
    67.     font-size: 92%;
    68.     text-transform: UPPERCASE;
    69.     border: 1px solid #FFFFFF;
    70.     border-bottom: none;
    71. }
    72.  
    73. #ja-cssmenu li a:hover,
    74. #ja-cssmenu li a:active,
    75. #ja-cssmenu li a:focus {
    76.  
    77. }
    78.  
    79. #ja-cssmenu li:hover,
    80. #ja-cssmenu li.sfhover,
    81. #ja-cssmenu li.havechildsfhover,
    82. #ja-cssmenu li.havechild-activesfhover {
    83.     color: #333333;
    84.     background: #EBF2F9;
    85. }
    86.  
    87. #ja-cssmenu li a.active,
    88. #ja-cssmenu li a.active:hover,
    89. #ja-cssmenu li a.active:active,
    90. #ja-cssmenu li a.active:focus {
    91.     color: #FFFFFF;
    92.     background: #666666;
    93. }
    94.  
    95. /* 2nd level and above */
    96. #ja-cssmenu li ul {
    97.     border: 1px solid #666666;
    98.     border-top: 5px solid #666666;
    99.     background: #666666;
    100. }
    101.  
    102. #ja-cssmenu li ul li {
    103.     border-bottom: 1px solid #555555;
    104.     border-right: none;
    105.     background: none;
    106. }
    107.  
    108. #ja-cssmenu li ul a {
    109.     border: none;
    110.     margin: 0;
    111.     padding: 5px 10px;
    112.     line-height: normal;
    113.     background: none;
    114.     color: #FFFFFF;
    115.     font-weight: normal;
    116.     font-size: 92%;
    117. }
    118.  
    119. #ja-cssmenu li.havesubchild,
    120. #ja-cssmenu li.havesubchild-active {
    121.     background: url(../../images/arrow3.png) no-repeat 94% 50%;
    122. }
    123.  
    124. #ja-cssmenu li ul a:hover,
    125. #ja-cssmenu li ul a:active,
    126. #ja-cssmenu li ul a:focus,
    127. #ja-cssmenu ul li:hover,
    128. #ja-cssmenu ul li.sfhover,
    129. #ja-cssmenu ul li.havesubchildsfhover,
    130. #ja-cssmenu ul li.havesubchild-activesfhover,
    131. #ja-cssmenu ul ul li:hover,
    132. #ja-cssmenu ul ul li.sfhover,
    133. #ja-cssmenu ul ul li.havesubchildsfhover,
    134. #ja-cssmenu ul ul li.havesubchild-activesfhover {
    135.     background: #999999;
    136.     color: #FFFFFF;
    137. }
    138.  
    139. #ja-cssmenu ul li a.active,
    140. #ja-cssmenu ul li a.active:hover,
    141. #ja-cssmenu ul li a.active:active,
    142. #ja-cssmenu ul li a.active:focus {
    143.     background: none !important;
    144.     color: #FFFFFF;
    145.     font-weight: bold;
    146.     text-decoration: underline;
    147. }

    пробовал изменять z-index: 1000;
    в http://www.htmlbook.ru/css/z-index.html
    пишут что он ко всем браузерам подходит
    но увы именно на фрмах данный индекс неработает .....
    кто знает простейший выход из ситуации?:'(
     
  2.  
  3. infoman
    Offline

    infoman Пользователь

    Регистрация:
    28.08.2007
    Сообщения:
    581
    Симпатии:
    12
    Пол:
    Мужской
    причём именно в ОСЛЕ IE

    зы
    http://www.thesergio.kiev.ua/load_file.php?menu=webdes/CSS/command/z-index.htm
    Примечание
    Список, созданный с помощью тега SELECT, в браузере Internet Exolorer всегда отображается поверх других элементов, несмотря на значение z-index. Только начиная с версии 5.5, Internet Explorer допускает применение атрибута z-index к фреймам (тег FRAME) и плавающим фреймам (IFRAME). Браузер Netscape 4.x поля форм всегда отображает поверх всех других элементов веб-страницы, независимо от заданного z-index.

    вопрос как побороть?
     
  4. Offline

    _voland_ Местный => Cпециалист <=

    Регистрация:
    12.04.2008
    Сообщения:
    2 171
    Симпатии:
    102
    Пол:
    Мужской
    Читал недавно про неверное понимание z-index у IE - кажется на artlebedev - суть в том что он смотрит ткже на родителя..
     
  5. infoman
    Offline

    infoman Пользователь

    Регистрация:
    28.08.2007
    Сообщения:
    581
    Симпатии:
    12
    Пол:
    Мужской
    проблема решена
    но неочень корректно
    применил метод
    http://rmcreative.ru/blog/post/eschjo-odin-fiks-z-index-i-select-v-ie6
    но инициализацию вставил как <a href='' OnMouseOver''
    в итеге так как меню формируется циклично
    все ссылки имеют OnMouseOver
    и наверно это грузит бедненького ослика.....:)
    вопрос с этим можно жить или есть более красиввые способы инициализации ?
     

Поделиться этой страницей

Загрузка...