select IE6

psywalker · September 11, 2009

Друзья, вобщем недавно в одной теме http://forum.htmlbook.ru/index.php?s=&...st&p=113221 BassEast предлагал решение одной херни, а точнее в ИЕ6 с её помощью работает выпадающий список и он перекрывает нижние элементы во время выпадения. Вобщем я повторил этот манёвр, в ИЕ6 заработало это чудо, но нижние элементы у меня почему-то закрываются этим выпадающим списком, вобщем помогите разобраться, в чём дело и как заставить в ИЕ6 работать всю эту хрень? :rolleyes:

http://psywalker.ru/Forum/Menu/6/main.html

mishka · September 11, 2009

Ты же обрати внимание что у него фрейм находится в блоке который на абсолюте

чтото мне кажется что тут <ul> неподойдет, так как фрейм придется в <li> запихивать

можеш просвятить меня что это за хак display/**/:block; ?

это типа для ие ниже 6й версии? если да то он ненужен, так как фрейм мы вставляем только в ие ниже шестой версии, следовательно все стили для фрейма подхватит только ие6 и ниже, так как фрейм только там и появится.

psywalker · September 11, 2009

Ты же обрати внимание что у него фрейм находится в блоке который на абсолюте
чтото мне кажется что тут <ul> неподойдет, так как фрейм придется в <li> запихивать
можеш просвятить меня что это за хак display/**/:block; ?

Да кто бы меня просветил)))

Ты лучше меня просвети, что такое фрейм и что мне делать? :rolleyes:

mishka · September 11, 2009

<li>
	<a href="#">abrakadabra</a>
	<div>
		<ul>
			<li>Lorem ipsum</li>
			<li>Lorem ipsum</li>
			<li>Lorem ipsum</li>
			<li>Lorem ipsum</li>
		</ul>
		<!--[if lt IE 7]><iframe></iframe><![endif]-->
	</div>
</li>

Ну дальше сам поймешь :rolleyes:

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

iframe{
	filter:mask();
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
	width:3000px;
	height:3000px;
}

psywalker · September 11, 2009

Мишка, не выходит ничего, посмотри сам: http://psywalker.ru/Forum/Menu/6/main.html

Теперь селекты перекрывают выпадающее меню :rolleyes:

mishka · September 11, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu</title>
		<style type="text/css">
			*{margin:0;padding:0;list-style:none;}
			body{min-width:1000px;}
			ul{
				height:47px;
				padding:0 20px;
				background:url(m-bg.jpg) left top repeat-x;
				border:1px solid #6b9b07;
				background:#94c74e;
			}
			ul li:hover .drop{display:block;}
			ul li{
				float:left;
				width:14%;
				position:relative;
				height:45px;
				display:table-cell;
				vertical-align:middle;
				padding:1px 1px;
				top:-1px;
				_behavior:url("csshover.htc")
			}
			ul li a{
				font-size:15px;
				color:#fff;
				background:url(arrow.gif) no-repeat 10px 50%;
				vertical-align:middle;
				display:table-cell;
				height:42px;
				padding-left:30px;
			}
			ul li:hover{
				background:url(m-bg.jpg) repeat-x 0 -48px;
				border:1px solid #b1770b;
				height:45px;
				padding:0px 0px 1px;
			}
			ul .drop{
				display:none;
				position:absolute;
				z-index:1;
				width:305px;
				overflow:hidden;
			}
			ul ul{
				left:0;
				top:49px;
				overflow:hidden;
				background:#94c74e;
				border:1px solid #6fa204;
				border-width:0 1px 1px;
				height:auto;
			}
			ul ul li{float:none;text-align:left;width:300px;padding:0 10px;background:none;display:block;}
			ul ul a{padding:0;padding-left:15px;}
		</style>
		<!--[if lt IE 7]>
			<style type="text/css">
			ul li{width:13.8%;display:inline;zoom:1;}
			ul li a{zoom:1;position:relative;padding-left:30px;width:70%;display:block;background:url(arrow.gif) no-repeat 10px 50%;}
			ul li a span{position:absolute;top:50%;}
			ul li a span span{position:relative;top:-50%;}
			iframe{
				position:absolute;
				top:0px;
				left:0px;
				z-index:-1;
				width:3000px;
				height:3000px;
				filter:mask();
			}
		</style>
		<![endif]-->
</head>
<body>
<div>
	<ul>
		<li><a href="#"><span><span>Детские коляски</span></span></a></li>
		<li><a href="#"><span><span>Детская мебель</span></span></a>
			<div class="drop">
				<ul>
					<li><a href="#">Детские кроватки</a></li>
					<li><a href="#">Детские комнаты</a></li>
					<li><a href="#">Дуэты (кровать+комод)</a></li>
					<li><a href="#">Кроватки-трансформеры</a></li>
					<li><a href="#">Комод-пеленатор(с ванночкой иеленальным столиком)</a></li>
					<li><a href="#">Комоды</a></li>
					<li><a href="#">Шкафы</a></li>
					<li><a href="#">Игровые манежи</a></li>
					<li><a href="#">Манежи-кроватки</a></li>
					<li><a href="#">Пеленальные столики с Ванночкой</a></li>
					<li><a href="#">Люльки</a></li>
					<li><a href="#">Люльки - переноски</a></li>
				</ul>
				<!--[if lt IE 7]><iframe></iframe><![endif]-->
			</div>
		</li>
		<li><a href="#"><span><span>Автокресла</span></span></a></li>
		<li><a href="#"><span><span>Постельные пренадлежности</span></span></a></li>
		<li><a href="#"><span><span>Мамочкам в помощь</span></span></a></li>
		<li><a href="#"><span><span>Детский транспорт</span></span></a></li>
		<li><a href="#"><span><span>Для купания и гигиены</span></span></a></li>
	</ul>
	<form action="#">
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
		<select class="brand"><option>Выберите производителя</option></select>
	</form>
</div>
</body>
</html>

неделай в css лесенки, это не упрощает, а усложняет код, также у тя много пробелов вместо табов

iframe{
	position:absolute;
	top:0px;
	left:0px;
	z-index:-1;
	width:3000px;
	height:3000px;
	filter:mask();
}

Также это можна вынести в цсс для ие6

Edited September 11, 2009 by mishka2

psywalker · September 11, 2009

Мих погоди, я не понял некоторые вещи:

1) Как тебе удалось добиться победы?

2) Про какие лесенки идёт речь? приведи пример

3) Разве я ставлю пробелы? Я же всегда жму таб :rolleyes:

mishka · September 11, 2009

Посмотри - фрейм находится внутри блока который ты вешаешь на абсолют! Ни до него, ни после, а именно внутри. Лесенка - посмотри на отступы в моем цсс и в своем. У тебя они как в хтмл - каждий вложеный елемент на таб сдвигаешь вправо. пример:

	*{margin:0;padding:0;list-style:none;}
	body{min-width:1000px;}
		ul{
			height:47px;
			padding:0 20px;
			background:url(m-bg.jpg) left top repeat-x;
			border:1px solid #6b9b07;
			background:#94c74e;
		}
			ul li:hover .drop{display:block;}
				ul li{
					float:left;
					width:14%;
					position:relative;
					height:45px;
					display:table-cell;
					vertical-align:middle;
					padding:1px 1px;
					top:-1px;
					_behavior:url("csshover.htc");
				}
					ul li a{
						font-size:15px;
						color:#fff;
						background:url(arrow.gif) no-repeat 10px 50%;
						vertical-align:middle;
						display:table-cell;
						height:42px;
						padding-left:30px;
					}

Пробелы сами ставятся при копипасте. Советую также работать с включенными в редакторе непечатаемыми символами (пробелы, табуляции)

Это не смертельно - но всеже...

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

psywalker · September 11, 2009

1) Ааа, тоесть надо обязательно в див погружать фрейм, да? а в него уже выплывающий список?

2)

Советую также работать с включенными в редакторе непечатаемыми символами (пробелы, табуляции)

Мих, а объясни поподробнее, что за тема такая?

А Дримвивер так умеет?

Edited September 11, 2009 by psywalker

mishka · September 11, 2009

Да все пирстойные редакторы так умеют. Где это включается в дриме я незнаю, но в настройках гдет есть чтото типа "Show Hidden Characters" ну иль както так по смыслу

psywalker · September 11, 2009

Да все пирстойные редакторы так умеют. Где это включается в дриме я незнаю, но в настройках гдет есть чтото типа "Show Hidden Characters" ну иль както так по смыслу

Мих, спасибо тебе за всё, теперь знаю хорошую идею с выпадающим меню, пойду рыться в редакторе, потому что насчёт пробелов ты тоже прав полюбому :rolleyes:

mishka · September 11, 2009

Да я у тебя тоже подчерпнул немало :rolleyes: . Да и вообще на этом форуме.

psywalker · September 11, 2009

Да я у тебя тоже подчерпнул немало . Да и вообще на этом форуме.

Да кстати, форум ваще офигенный, согласись? я тут уже стока узнал, что аж ппц, главное стока мастеров с большой буквы, а не каких нибудь лохов с таких же форумов. Када сюда попал, помню вопросы детские задавал ваще, а ща уже фигарю тока в путь))) И до сих пор ещё по-жизни заходишь бывало и какую нибудь новую хрень отцы зафигачат, что аж сам не веришь своим глазам, что такое например умеет CSS :rolleyes:

Знаешь чё люблю кстати, В общем люблю задачки всякие на CSS, тока что нибудь изысканное, да и вообще можно любые, у тебя нет ничё на примете? может какие трюки, приёмы ну и т. д.?

Edited September 11, 2009 by psywalker

mishka · September 11, 2009

Знаешь чё люблю кстати, В общем люблю задачки всякие на CSS, тока что нибудь изысканное, да и вообще можно любые, у тебя нет ничё на примете? может какие трюки, приёмы ну и т. д.? smile.gif

Ну для кого может и не изысканное.... Но хотелось бы узнать кто как делает тянущиеся по горизонтали png кнопочки. Желательно спрайтом конечно и с ховером.

mishka · September 12, 2009

Но хотелось бы узнать кто как делает тянущиеся по горизонтали png кнопочки. Желательно спрайтом конечно и с ховером.

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

psywalker · September 12, 2009

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

Погоди, нихрена подобного, могу тебе задачу одну дать(насчёт кнопки кстати), если решишь, молодец, а нет, значит будешь решать, пока не решишь! Если согласишься, отпиши мне в личку

mishka · September 12, 2009

Я непросил тебя задавать мне задачки, я просил дать решение.

psywalker · September 12, 2009

Я непросил тебя задавать мне задачки, я просил дать решение.

да а чё решать то, я обычно делаю кнопки в 3 дива, два по бокам, один середина тянется, вот и всё, для ИЕ6 тоже всё работает в этом случае :rolleyes:

Edited September 12, 2009 by psywalker

mishka · September 12, 2009

А это спрайтом?

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

Ну и задачку давай посмотрим

Edited September 12, 2009 by mishka2

psywalker · September 12, 2009

А это спрайтом?
Это когда картинка для бг одна, и для ховера и для нормального состояния. Ну и естественно не порезана на правую, левую и центральную часть отдельно.
Ну и задачку давай посмотрим

1) Нее, ну спрайтом не выйдет, потому что Позицию фона в ИЕ6 не удастся занять

2) Задачка не о чём, забудь :rolleyes:

Sign In

select IE6

Question

Link to comment

Share on other sites

19 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

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