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


Автор: antslava 6.11.2009, 18:46
Вообщем есть у меня меню и подменю в виде не нумерваного списка. При установки прозрачности для главного меню в ie 6-7 пропадает подменю. Кто нибудь может подсказать где копать или может как решить данную проблему.
Прозрачность ставлю для элемента <li>

Автор: youri 7.11.2009, 08:17
приведи минимальный нерабочий пример

Автор: antslava 9.11.2009, 12:29
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Opacity example for vinograd</title>
<style>
ul.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 1024px;
    height: 87px;
}
ul.menu li {
    background: #360;
    float: left;
    height: 87px; 
    width: 146px;
    text-align: center;
    filter:alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
    position: relative;
}
ul.menu li:hover {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
ul.menu li a {
    display:block;
    margin: 65px 0 0 0;
}
ul.menu ul {
    list-style: none;
    position: absolute;
    top: 87px;
    left: -320px;
    height: 24px;
    width: 750px;
}
ul.menu ul li {
    float: left;
    width: 150px;
    height: 24px;
    line-height: 24px;
}
ul.menu ul li a {
    margin: 0;
}
</style>
</head>
<body>
<ul class="menu">
  <li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
  <li class="item2"><a href="#"><span>News</span></a></li>
  <li class="item3"><a href="#"><span>Produkte</span></a></li>
  <li class="parent item4"><a href="#"><span>Lexikon</span></a>
    <ul>
      <li class="item5"><a href="#"><span>Solarzellen</span></a></li>
      <li class="item6"><a href="#"><span>Solarmodule</span></a></li>
      <li class="item7"><a href="#"><span>Stromgenerator</span></a></li>
      <li class="item8"><a href="#"><span>Stromzähler</span></a></li>
      <li class="item9"><a href="#"><span>Wechselrichter</span></a></li>
    </ul>
  </li>
  <li class="item10"><a href="#"><span>Kontakt</span></a></li>
  <li class="item11"><a href="#"><span>Impressum</span></a></li>
  <li class="item12"><a href="#"><span>AGB</span></a></li>
</ul>
</div>
</body>
</html>


Вообщем как только я ставлю прозрачность в стилях у меня пропадает подменю в ие6 и ие7. В остальных браузерах работает нормально

Автор: blah 9.11.2009, 13:52
Дело в том, что фильтр работает сродни overflow:hidden; В вашем случае нельзя применять фильтр к контейнеру с абсолютно позицированным элементом. Чтоб было понятнее, 
Код

filter:alpha(opacity=100);
 фильтр не применяет.
Если есть возможность, поставьте изменение прозрачности на ul.menu li:hover a или  ul.menu li а:hover.

Автор: antslava 9.11.2009, 20:13
Огромное спасибо за совет!! Теперь все получилось. Если б можно было ставить + я б поставил

Автор: youri 10.11.2009, 15:52
Цитата(blah @  9.11.2009,  13:52 Найти цитируемый пост)
Дело в том, что фильтр работает сродни overflow:hidden;

и в чем сродство? Если добавить ширину для position: absolute, он появляется

Автор: youri 10.11.2009, 17:16
UPD: сорри, экспериментировал с div'ами

Автор: youri 11.11.2009, 18:20
... и не учел position: relative
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div style="filter-: alpha(opacity=100);
                overflow: hidden;
                position: relative;
                height: 100px;
                width: 100px;
                background: blue;">
        <div style="position: absolute;
                    left: 50px;
                    top: 50px;">asdasdadadasdasdasda</div></div>
</body>
</html>

т.е. если нету position: relative, то внутренний div виден полностью. blah, не знаешь почему внутренний div обрезается при position: relative?

Автор: blah 12.11.2009, 12:58
Потому что при относительном позиционировании родителя, абсолютное позиционирование дочернего относится к нему, следовательно на чайлда действует overflow:hidden; и наоборот.

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