Форум PHP программистов > Проблема с выпадающим меню

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Проблема с выпадающим меню

revaninfo

20.09.2009 - 14:37

Всем привет! У меня проблема с выпадающим вертикальным меню, даже две проблемы.

Проблема 1:
В IE появляется странный пустой пиксель в этом месте над border-top и под бэкграундом:

.nav li {
background: url(images/menu_bg.gif);
height: 20px;
padding-left: 10px;
border-top: 1px solid #d0d0d0;
padding-top: 6px;
font-weight: bold;
font-size: 10px;
position: relative;
}

Проблема 2:

У меня есть блок position:relative для меню в css я задал как видите z-index:1 в опере все ОК а вот наш старый добрый IE как всегда не хочет работать, релативный блок стоит поверх выпадающих менюшек.

Спс заранее за вашу ценную помощь!

Вот вобщем стиль css:

HTML

.nav {
border: 1px solid #d0d0d0;
width: 163px;
margin-right: 5px;
list-style: none;
font-family: Arial;
}

.nav li {
background: url(images/menu_bg.gif);
height: 20px;
padding-left: 10px;
border-top: 1px solid #d0d0d0;
padding-top: 6px;
font-weight: bold;
font-size: 10px;
position: relative;
}

.nav li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 163px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: -1px;
display: none;
list-style: none;
border: 1px solid #d0d0d0;
border-top: 0;
filter:alpha(opacity=100);
-moz-opacity:1;
z-index: 1;
}

.nav li a{
display: block;
width: auto;
}

/* Holly Hack for IE \*/
* html .nav li { float: left; height: 1%; }
* html .nav li a { height: 1%; }

.nav .start {
height: 24px;
background: url(images/menu_header.gif);
text-align: center;
padding-top: 10px;
font-size: 12px;
border: 0;
}

.nav .arrowdiv{
position: absolute;
right: 2px;
margin-right: 7px;
background: transparent url(images/arrow.gif) no-repeat center right;
}

Вот html:

HTML

<ul class="nav" id="verticalmenu">
<li class="start"><b>NAVIGATION</b></li>
<li><a href="">HOME PAGE</a></li>
<li><a href="">NEWS</a>
<ul>
<li><a href="">SPAIN</a></li>
<li><a href="">ENGLAND</a></li>
<li><a href="">ITALY</a></li>
</ul>
</li>
<li><a href="">ASSOCIATIONS</a>
<ul>
<li><a href="">SPAIN -PRIMERA DIVISION</a></li>
<li><a href="">ENGLAND - PREMIER LEAGUE</a></li>
<li><a href="">ITALY - SERIE A</a></li>
<li><a href="">FRANCE - LIGUE 1</a></li>
<li><a href="">GERMANY - BUNDESLIGA</a></li>
</ul>
</li>
<li><a href="">FROUM</a></li>
<li><a href="">SOCIAL NETWORK</a></li>
<li><a href="">LIVE</a></li>
<li><a href="">CALENDAR</a></li>
<li><a href="">CUPS</a></li>
</ul>

Вот жабаскрипт:

HTML

Спустя 2 часа, 30 минут, 20 секунд (20.09.2009 - 16:07) glock18 написал(а):

Цитата

position: absolute;
width: 163px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: -1px;

так ли нужен здесь position: absolute?
вообще по твоему описанию не могу определить симптомы, но возникновение обеих проблем вижу в:

1. альфа-фильтр.
2. position: relative у li.

еще не могу понять суть "святого хака". для чего он?

Спустя 7 часов, 3 минуты, 19 секунд (20.09.2009 - 23:11) revaninfo написал(а):

Что такое альфа-фильтр я вообще без понятия (если ява то это и не странно) а в общем на симптомы можешь посмотреть здесь сам: http://livedit.org

Спустя 8 часов, 33 минуты, 43 секунды (21.09.2009 - 07:44) glock18 написал(а):

альфа-фильтр - это фича ie. ей прозрачность делается. у тебя прозрачность выставлена в 0 - убери их вообще, если так.

смотрел по ссылке в ie7. скорее всего это из-за position: relative. ie очень нехорошо с ним работает и вечно глючит.

в любом случае, я бы тебе посоветовал обратить внимание на то, что верхняя картинка расположена под списком, а то что ниже - над. посмотри чем они отличаются, и, возможно, поймешь в чем дело.

лишний пиксель между пунктами - почитай про hasLayout и про то как это дело обходится. самый простой вариант указать отрицательный маргин.

Спустя 6 часов, 27 минут, 31 секунда (21.09.2009 - 14:12) revaninfo написал(а):

Спс с пустым пробелом я разобрался. А вот насчет картинки не понял, какая именно верхняя картинка?

Спустя 33 минуты, 55 секунд (21.09.2009 - 14:46) glock18 написал(а):

Цитата

Спс с пустым пробелом я разобрался. А вот насчет картинки не понял, какая именно верхняя картинка?

Картинка с футболистом, над которой открываются несколько верхних пунктов меню. у меня она расположена под открывающейся менюшкой.

Спустя 1 час, 2 минуты, 6 секунд (21.09.2009 - 15:48) revaninfo написал(а):

Ааа понял о чем ты, там есть проблемка как раз то. Те картинки что ниже, у них свойство position: relative; вот этим они и отличаются. Именно с этим я и пытаюсь разобраться, relative убрать не могу...

Спустя 47 минут, 32 секунды (21.09.2009 - 16:35) glock18 написал(а):

Цитата

понятно. это очередной баг ie с position:relative; Не знаю вариантов кроме того, чтобы убрать position: relative. В большинстве случаев его можно убрать достаточно просто. Почему там не получится?

Спустя 1 час, 39 минут, 51 секунда (21.09.2009 - 18:15) revaninfo написал(а):

Плагин jquery работать не будет просто, может можно там че нибудь еще поставить? Незнаю, но когда я убрал, или изменял position то вообще не работало...

Быстрый ответ:

Здесь расположена полная версия этой страницы.