Дочерние селекторы в IE6

Selen · February 2, 2011

Доброго времени суток.

Это моя первая тема и первое сообщение. Я новичок в изучении HTML верстки и как любой новичок сталкиваюсь с определенными сложностями. Слава богу информации всевозможной на эту тему достаточно много, бери и учись. Очень много полезного узнал именно на сайте _www.htmlbook.ru. На мой взгляд это лучший сайт для начала изучения. Для новичка все разжевано и разложено по полочкам.

Выше была присказка, дальше будет сказка))

Задача: Создать выпадающий список 2-3-4...n уровней, методом CSS. В разных источниках, предлагается много разных рабочих вариантов. Попробовав несколько из них, я остановился на одном из них, наиболее универсальном на мой взгляд.

Все работает на ура, во всех браузерах... Кроме одного... ИЕ 6 не понимает :hover и дочерние селекторы.

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

HTML:

<ul>
  <li><a href="#">Байки по автору</a>
	<ul>
	     <li><a href="#">Автор №1</a></li>
	      <li><a href="#">Автор №2</a>
		    <ul>
			<li><a href="#">Байка автора №1</a></li>
			<li><a href="#">Байка автора №2</a></li>
			<li><a href="#">Байка автора №3</a></li>
		     </ul>
		</li>
		<li><a href="#">Автор №3</a></li>
		<li><a href="#">Автор №4</a></li>
		<li><a href="#">Автор №5</a></li>
		<li><a href="#">Автор №6</a></li>
		<li><a href="#">Автор №7</a></li>
	</ul>
  </li>
</ul>

CSS:

LI:hover {
	position: relative;
}
LI:hover > UL {
	visibility: visible;
}
LI:hover > A {
	background: #99FF99;
	font-weight: bold;
}

:hover решил с помощью

LI {
	behavior: url(ie6/hover.htc);	/* :hover for IE 6 */
}
LI {
	behavior: url(ie6/hover.htc);	/* :hover for IE 6 */
}
LI.hover {
	position: relative;
}
LI.hover UL {
	visibility: visible;
}
LI.hover A {
	background: #99FF99;
	font-weight: bold;
}
Содержимое [b]behavior[/b]
<attach for=element event=onmouseover handler=topm>
<attach for=element event=onmouseout handler=verm>
<script>
  function topm(){element.className='hover';}
  function verm(){element.className='';}
</script>

Прошу прощение за большое кол-во букв и за оформление поста Новичок, что с меня взять ?! <_<

Serlutin · February 2, 2011

Ни то, ни другое в IE6 не поддерживается. Но если с :hover проблему можно решить, то с дочерним селектором никак. Когда-то он даже использовался для того, чтобы скрывать стили от IE6.

Как вариант можно сделать так.

LI:hover {
position: relative;
}
LI:hover UL {
visibility: visible;
}
LI:hover A {
background: #99FF99;
font-weight: bold;
}

Либо если нужно больше гибкости, то использовать классы.

Selen · February 2, 2011

Вариант без знака дочернего селектора не пройдет, тогда при наведении на ссылку, будет открываться все уровни сразу и помеченные цветом выделения, все без исключения.

Вот полный CSS отвечающий за выпадение менюшек. Для нормальных браузеров

.menu{
	float: left;
	margin-top: 15px;
	margin-left: 10px;
	border-bottom: 1px solid #33CC33;
}
UL {
	width: 200px;
	position: relative;
}
LI {
	float: left;
}
LI A {
	display: block;
	width: 198px;
	height: 30px;
	line-height: 30px;
	text-indent: 5px;
	background: #CCFFCC;
	border: 1px solid #33CC33;
	border-width: 1px 1px 0 1px;
	text-decoration: none;
}
LI UL {
	visibility: hidden;
	position: absolute;
	left: 199px;
	top: 0;
	border-bottom: 1px solid #33CC33;
}
LI:hover {
	position: relative;
}
LI:hover > UL {
	visibility: visible;
}
LI:hover > A {
	background: #99FF99;
	font-weight: bold;
}

psywalker · February 2, 2011

Делай как тут http://psywalker.ru/Forum/Menu/L-Menu/main-page.html

Используй эту штуку behavior:url("csshover.htc")}

Там есть весь материал

rediskavet · February 2, 2011

Отдельный стиль для ie6 как вариант.

Selen · February 2, 2011

Отдельный стиль для ie6 как вариант.

Все что касается ИЕ6 я пишу в отдельном CSS,и подключаю к HTML)

Serlutin · February 2, 2011

Вариант без знака дочернего селектора не пройдет, тогда при наведении на ссылку, будет открываться все уровни сразу и помеченные цветом выделения, все без исключения.

Тогда вложенному UL задаём класс, и обращаемся к нему уже как LI:hover .class_name

К ссылке обращаемся так LI:hover .class_name a

rediskavet · February 2, 2011

Все что касается ИЕ6 я пишу в отдельном CSS,и подключаю к HTML)

Ну тогда ведь не обязательно учить ие6 дочерним селекторам, сделайте через классы как выше написано, просто в других браузерах эти классы будут не задействованы.

Edited February 2, 2011 by rediskavet

psywalker · February 2, 2011

Что-то вы совсем парню не то советуете ребята.

rediskavet · February 2, 2011

Что-то вы совсем парню не то советуете ребята.

Почему Макс?

LI:hover .class_name

Это же будет работать. :hover сработает т.к. .htc его поймет. Ну а затем стили для .class_name применяться.

psywalker · February 2, 2011

Почему Макс?
LI:hover .class_name
Это же будет работать. :hover сработает т.к. .htc его поймет. Ну а затем стили для .class_name применяться.

Ааа, тогда всё ок, я просто думал, что вы ему советуете без .htc

rediskavet · February 2, 2011

Ааа, тогда всё ок, я просто думал, что вы ему советуете без .htc

А я сам и правда избегаю теперь всяких .htc. У меня для :hover есть другая заготовка.

Вот пример:

CSS

#menu1 li:hover ul,
#menu1 li.sfhover ul{
   display: block;
}

И к нему js который раздает нужным лишкам классы

window.onload = function(){
	sfHover = function() {
		var sfEls = document.getElementById("menu1").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++){
			sfEls[i].onmouseover=function(){
				this.className+=" sfhover";
				}
			sfEls[i].onmouseout=function(){
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
}

Edited February 2, 2011 by rediskavet

psywalker · February 2, 2011

Да, но это же надо ЖС подключать.

Serlutin · February 2, 2011

Сейчас свой вариант попробовал, так правда ерунда получилась.

Конечно с дочерними элементами вариант очень красивый. Хотя бы тем, что получаешь больший контроль. Но с IE6 всё ещё нужно пока мириться, так что приходится использовать не очень изящные решения.

Немного подумал и сделал вот что. (в ie6 не тестировал, но если подключить .htc, то должно работать) Смысл в том что LI, который будет активировать меню и самому меню задаём одинаковый класс. Сделано это для того, чтобы не запутаться. Да, кстати, всё полностью валидно. Единственно но, css выглядит немного монструозно.

И к нему js который раздает нужным лишкам классы

Не .htc предпочтительнее тем, что его можно прописать только IE6. IE7, если я не ошибаюсь, уже поддерживает :hover в полной мере. А вариант с js будет грузить страничку немного большее в других браузерах. Само по себе это не страшно, но иногда каждая миллисекунда на счету.

Edited February 2, 2011 by Serlutin

psywalker · February 2, 2011

Сейчас свой вариант попробовал, так правда ерунда получилась.
Конечно с дочерними элементами вариант очень красивый. Хотя бы тем, что получаешь больший контроль. Но с IE6 всё ещё нужно пока мириться, так что приходится использовать не очень изящные решения.
Немного подумал и сделал вот что. (в ie6 не тестировал, но если подключить .htc, то должно работать) Смысл в том что LI, который будет активировать меню и самому меню задаём одинаковый класс. Сделано это для того, чтобы не запутаться. Да, кстати, всё полностью валидно. Единственно но, css выглядит немного монструозно.

Спасибо за идею. А объясни плиз поподробнее, в чём фишка?

Selen · February 3, 2011

Всем большое спасибо за помощь и дельные советы. Отдельное спасибо Serlutin за подсказку с классами. Правда и тут пришлось немного повозиться, т.к. добавление класса для UL (LI:hover .class_name) сработало (правда, для каждого уровня пришлось прописывать свой стиль), а для A (LI:hover .class_name a) - нет(( Пришлось городить монстроподобные конструкции стилей для каждого уровня и цеплять к каждой ссылке класс. Получилось кроссбраузерно.

HTML

<div class="menu">
			<ul>
				<li><a class="color_l1" href="#">Все байки</a>
					<ul class="level_2">
						<li><a class="color_l2" href="#">Байка №1</a></li>
						<li><a class="color_l2" href="#">Байка №2</a></li>
						<li><a class="color_l2" href="#">Байка №3</a></li>
					</ul>
				</li>
				<li><a class="color_l1" href="#">Байки по автору</a>
					<ul class="level_2">
						<li><a class="color_l2" href="#">Автор №1</a>
							<ul class="level_3">
								<li><a class="color_l3" href="#">Не страшная байка</a></li>
								<li><a class="color_l3" href="#">Байка-Бабайка</a></li>
							</ul>
						</li>
						<li><a class="color_l2" href="#">Автор №2</a>
							<ul class="level_3">
								<li><a class="color_l3" href="#">Страшная байка</a></li>
								<li><a class="color_l3" href="#">Очень страшная байка</a></li>
								<li><a class="color_l3" href="#">Самая страшная байка</a></li>
							</ul>
						</li>
						<li><a class="color_l2" href="#">Автор №3</a></li>
						<li><a class="color_l2" href="#">Автор №4</a></li>
						<li><a class="color_l2" href="#">Автор №5</a></li>
						<li><a class="color_l2" href="#">Автор №6</a></li>
						<li><a class="color_l2" href="#">Автор №7</a></li>
					</ul>
				</li>
				<li><a class="color_l1" href="#">Байки по теме</a>
					<ul class="level_2">
						<li><a class="color_l2" href="#">Тема №1</a></li>
						<li><a class="color_l2" href="#">Тема №2</a></li>
						<li><a class="color_l2" href="#">Тема №3</a></li>
						<li><a class="color_l2" href="#">Тема №4</a></li>
					</ul>
				</li>
				<li><a class="color_l1" href="#">Популярные разделы</a>
					<ul class="level_2">
						<li><a class="color_l2" href="#">Популярный раздел №1</a></li>
					</ul>
				</li>
				<li><a class="color_l1" href="#">Последние байки</a>
					<ul class="level_2">
						<li><a class="color_l2" href="#">Последняя байка №1</a></li>
						<li><a class="color_l2" href="#">Последняя байка №2</a></li>
						<li><a class="color_l2" href="#">Последняя байка №3</a></li>
						<li><a class="color_l2"href="#">Последняя байка №4</a></li>
						<li><a class="color_l2" href="#">Последняя байка №5</a></li>
					</ul>
				</li>
			</ul>
		</div>

CSS:

LI {
	behavior: url(ie6/hover.htc);	/* :hover for IE 6 */
}
LI.hover {
	position: relative;
}
LI.hover .level_2 {	/* visibility for level 2 */
	visibility: visible;
}
UL LI UL LI.hover .level_3 {	/* visibility for level 3 */
	visibility: visible;
}
LI.hover .color_l1 {	/* hover color for level 1 */
	background: #99FF99;
	font-weight: bold;
}
UL LI UL LI.hover .color_l2 {	/* hover color for level 2 */
	background: #99FF99;
	font-weight: bold;
}
UL LI UL LI UL LI.hover .color_l3 {	/* hover color for level 3 */
	background: #99FF99;
	font-weight: bold;
}

PS: и еще маленький вопрос) В каком разделе форума я могу выложить код странички которой я сверстал для оценки? В разделе обсуждение работ или можно в этой теме? Страничка простенькая, за основу взял страницу с учебника _htmlbook.ru.

Edited February 3, 2011 by Selen

Great Rash · February 3, 2011

PS: и еще маленький вопрос) В каком разделе форума я могу выложить код странички которой я сверстал для оценки? В разделе обсуждение работ или можно в этой теме?

В обсуждении работ.

Sign In

Дочерние селекторы в IE6

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information