VPF::при установки opacity пропадает сабменю в ie

antslava

Дата 6.11.2009, 18:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 16.7.2008
Где: Одесса

Репутация: нет
Всего: 2

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

youri

Дата 7.11.2009, 08:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

приведи минимальный нерабочий пример

--------------------

С кем разговаривает Microsoft

antslava

Дата 9.11.2009, 12:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 16.7.2008
Где: Одесса

Репутация: нет
Всего: 2

Код


<!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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

Код


filter:alpha(opacity=100);

фильтр не применяет.
Если есть возможность, поставьте изменение прозрачности на ul.menu li:hover a или ul.menu li а:hover.

antslava

Дата 9.11.2009, 20:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 45
Регистрация: 16.7.2008
Где: Одесса

Репутация: нет
Всего: 2

Огромное спасибо за совет!! Теперь все получилось. Если б можно было ставить + я б поставил

Это сообщение отредактировал(а) antslava - 9.11.2009, 20:14

youri

Дата 10.11.2009, 15:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

Цитата(blah @ 9.11.2009, 13:52

)

Дело в том, что фильтр работает сродни overflow:hidden;

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

--------------------

С кем разговаривает Microsoft

youri

Дата 10.11.2009, 17:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

UPD: сорри, экспериментировал с div'ами

--------------------

С кем разговаривает Microsoft

youri

Дата 11.11.2009, 18:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

... и не учел 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?

--------------------

С кем разговаривает Microsoft

blah

Дата 12.11.2009, 12:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »