z-index VS SELECT в ie6

WalkMan · September 6, 2009

Кто как справляеться с багом наложения слоя на форму SELECT ?

В ие6 селект всегда перекрывает слой

<!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" xml:lang="en" lang="en"><head>

<style type="text/css"><!--

ul.menu1 {
background-color: red;
color: blue;
list-style: none;
display: block;
position: absolute;
z-index: 10;
}

--></style>

<body>

<ul class="menu1">
<li>пункт меню</li>
<li>пункт меню</li>
<li>пункт меню</li>
<li>пункт меню</li>
<li>пункт меню</li>
<li>пункт меню</li>
</ul>

<form method="post" action="http://localhost/cgi/script"
enctype="multipart/form-data">
<select class="selection1" name="optionlist" size="5" multiple="multiple">
<option value="ITEM1">ITEM1</option>
<option value="ITEM2">ITEM2</option>
<option value="ITEM3">ITEM3</option>
<option value="ITEM4">ITEM4</option>
<option value="ITEM5">ITEM5</option>
<option value="ITEM6">ITEM6</option>
<option value="ITEM7">ITEM7</option>
<option value="ITEM8">ITEM8</option>
</select>
</form>

</body></html>

в моем случае раскрывающее подменю(position: absolute) не перекрывает форму выбора, которая расположена внизу:

psywalker · September 6, 2009

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

WalkMan · September 6, 2009

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

про баг даж пишут на сайте микрсовфт)

http://support.microsoft.com/default.aspx?...amp;Product=iep

есть решения на ява и при помощи iframe, но вот с последним чтото я не смог разобраться

<!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" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>мебель</title>
<style>
body {
width: 100%;
height: 100%;
background-color: #7E8082;
font : 14px tahoma, sans-serif;
}

a:active, a:focus, img {outline: 0;}


html, body, ol, ul, li, h1, h2, h3, h4, h5, h6, p, form, img, table, dl, dt, dd { padding:0; margin:0; }
img {border: none;}

a:link, a:visited, a:active{
color : #fff;
cursor : pointer;
}

a:hover{
color : #f6c44b;
cursor : pointer;
}


#main{
width : 998px;
margin-left : auto;
margin-right : auto;
height : 100%;
}



#content {
	background: #b3b3b3 url(../img/content_bg1.jpg) no-repeat 13% 0%;
	padding-bottom: 20px;
}

#bg2 {
  background: url(../img/content_bg2.jpg) no-repeat 100% 100%;
  height: 100%;
}

/* right column */
#right {
  margin: 0px 30px 0px 335px;
  padding-top: 25px;
  width: auto;
}


/* end right column */


/*left column */
#left {
  width: 325px;
  float: left;
}

#left h1, #right-2 h1 {
  padding:5px 5px;
  font: bold 22px times new roman;
  color: #760000;
}

#left h1 {
  padding:5px 50px;
}


#bg-left {
 background-color: #cacbcd;
 width: 305px;
}


#menu, #search_on_catalog, #select_fabric {
  width: 305px;
  padding: 10px 0px;
	}



#menu ul {
  margin-left: 30px;
  list-style: none;
	}

#menu ul li {
  font: 18px times new roman;
  line-height: 20px;
  padding: 2px 0px 2px 20px;
  display: block;
  z-index: 100;
  border-bottom: solid 1px #b3b3b3;
	}

#menu ul li:hover, #menu ul li.over {
  position: relative;background-color: #760000;
}

#menu ul li a {
  display: block;
  text-decoration: none;
  color: #000;
}


#menu li a:hover, #menu ul li:hover a, #menu ul li.over a  {
  text-decoration: none;
  color: #f6c44b;
  background-color: #760000;
  display: block;

	}

#menu li ul {
	display: none;
	}

* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }

#menu li:hover ul, #menu li.over ul {
  display: block;
  text-decoration: none;
  background-color: #760000;
  position: absolute;
  top: 0px;
  left: 140px;z-index: 100;

	}

#menu ul li:hover ul li, #menu ul li.over ul li {
  display: block;
  padding: 2px 0px;
  color: #fff;
  width: 100%;
  _width: 150px;
  border: none;
	}

#menu li:hover ul li a, #menu li.over ul li a { color: #fff;  padding-right: 10px;}

#menu li:hover ul li a:hover, #menu li.over ul li a:hover { color: #f6c44b;}


#search_on_catalog {
  position: relative;
  z-index: 0; overflow: hidden;
}


#search_on_catalog p, #select_fabric p {
  padding-right: 20px;
  text-align: right;
  margin-top: 3px;
	}

#search_on_catalog p span, #select_fabric p span {
  display: block;
  float: left;
  margin-left: 30px;
  font-weight: bold;
  font: 18px times new roman;
	}


#search_on_catalog select, #select_fabric select {
  background-color: #760000;
  color: #fff;
  width: 130px;
  font: 17px times new roman;
	}

#map {height: 195px;}

#map div{
  height: 139px;
  width: 261px;
  float: right;
  padding-right: 20px;
}


</style>
<script type="text/javascript" >

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

</script>


</head>

<body>
<div id="main">

	<div id="content">
		<div id="bg2">
		<div id="left">
			<h1>Каталог</h1>
			<div id="bg-left">
			  <div id="menu">
				  <ul id="nav">
					  <li><a href="#"><span>- </span>Кухни</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Изделия из акрила</a>
						<div>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
						  </div>
					  </li>
					  <li><a href="#"><span>- </span>Шкафы-купе</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Универсальная система хранения ELFA</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Стулья</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Тумбочки</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Столы</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Табуретки</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
					  <li><a href="#"><span>- </span>Кресла</a>
						  <ul>
							<li><a href="#"><span>- </span>Современные</a></li>
							<li><a href="#"><span>- </span>Классические</a></li>
							<li><a href="#"><span>- </span>Оборудование</a></li>
						  </ul>
					  </li>
				  </ul>
			  </div>
			  <div id="search_on_catalog">
				  <h1>Поиск по каталогу</h1>
				  <form method="post" action="#">
					  <p ><span>Раздел:</span>
						  <select size="1" name="D1">
						  <option value="1">Кухни</option>
						  <option value="2">Столы</option>
						  <option value="3">Спальни</option>
						  <option value="4">Шкафы</option>
						<option value="5"></option>
						  </select>
					  </p>
				  </form>
				  <form method="post" action="#">
					  <p ><span>Фабрика:</span>
						  <select size="1" name="D1">
						  <option value="1">Ленина</option>
						  <option value="2">2</option>
						  <option value="3">3</option>
						  <option value="4">4</option>
						  </select>
					  </p>
				  </form>
				  <form method="post" action="#">
					  <p ><span>Стиль:</span>
						  <select size="1" name="D1">
						  <option value="1">Классический</option>
						  <option value="2">2</option>
						  <option value="3">3</option>
						  <option value="4">4</option>
						  </select>
					  </p>
				  </form>
				  <form method="post" action="#">
					  <p ><span>Модель:</span>
						  <select size="1" name="D1">
						  <option value="1">Виолетта</option>
						  <option value="2">2</option>
						  <option value="3">3</option>
						  <option value="4">4</option>
						  </select>
					  </p>
				  </form>
				  <form method="post" action="#">
					  <p ><span>Салон:</span>
						  <select size="1" name="D1">
						  <option value="1"></option>
						  <option value="2">Эко</option>
						  <option value="3">Doors</option>
						  <option value="4">4</option>
						  </select>
					  </p>
					  <p>
						  <input type="button" value="Поиск" name="B2"/>
					  </p>
				  </form>
			  </div>
			  <div id="map">
				<h1>Как нас найти</h1>
				<div><a href=""><img src="img/map.jpg" width="261" height="139" alt="" /></a></div>
			  </div>
			</div>
		</div>

	</div>
	</div>


</div>
</body>

</html>

Edited September 6, 2009 by WalkMan

BassEast · September 6, 2009

я это обычно правлю так:

css:

.bazz {
  position:absolute;
  left:0;
  top:0;
  width:150px;
  height:300px;
}

.bazz iframe  {
  display:none;
  display/**/:block;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  filter:mask();
  width:3000px;
  height:3000px;
  }

html:

<select>
	<option></option>
	<option></option>
		<option></option>
		<option></option>
</select>

<div class="bazz"> 
	хренов текст
	<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

psywalker · September 6, 2009

я это обычно правлю так:

css:

.bazz {
  position:absolute;
  left:0;
  top:0;
  width:150px;
  height:300px;
}

.bazz iframe  {
  display:none;
  display/**/:block;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  filter:mask();
  width:3000px;
  height:3000px;
  }

html:

<select>
	<option></option>
	<option></option>
		<option></option>
		<option></option>
</select>

<div class="bazz"> 
	хренов текст
	<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Басист, а я далёк от этого, поэтому ты не мог бы привести полный рабочий код, да и вообще пример

BassEast · September 6, 2009

пример

psywalker · September 6, 2009

пример

Спасибо дружище, буду знать

WalkMan · September 7, 2009

Cпасибо

Будем внедрять

Great Rash · September 7, 2009

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

BassEast · September 7, 2009

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

и зачем это?

Great Rash · September 7, 2009

Что зачем?

s0rr0w · September 7, 2009

Что зачем?

Зачем велосипед изобретать?

Great Rash · September 7, 2009

Хочу.

Знаете нормальный скрипт по замене селектов? Кинте ссылку, я перейму опыт. Хотя лично я ничего путного не нашел в свое время.

BassEast · September 7, 2009

Хочу.
Знаете нормальный скрипт по замене селектов? Кинте ссылку, я перейму опыт. Хотя лично я ничего путного не нашел в свое время.

по-моему не стоит дизайнерить всемилостивые, системные кнопки

WalkMan · September 7, 2009

Скрипты не панацея

Да и если погуглить по буржуйским сайтам то можно найти уже готовые рабочие примеры.

Если позволяет html & css то лучше их

Edited September 7, 2009 by WalkMan

Great Rash · September 7, 2009

Да и если погуглить по буржуйским сайтам то можно найти уже готовые рабочие примеры.

Если позволяет html & css то лучше их

Нормальных примеров нет. Вставлять <iframe> - не лучший выход из положения. И плюс ко всему я не вижу преимуществ HTML + CSS перед JavaScript.

по-моему не стоит дизайнерить всемилостивые, системные кнопки

Еще как стоит. Почему то никто не удивляется когда "всемилостивые, системные кнопки" имеют необычный вид, скажем, во Flash'е. Чем же плох яваскрипт?

Justnewone · September 7, 2009

Еще как стоит. Почему то никто не удивляется когда "всемилостивые, системные кнопки" имеют необычный вид, скажем, во Flash'е. Чем же плох яваскрипт?

На мой взгляд - перерисованная системная кнопка - поражение дизайнера, а не победа. Раз у него нету никаких внутренних ресурсов придумать такой дизайн, чтобы вещи, которые понятны на интуитивном (читай - инстинкт, читай - юзабилити) уровне были кстати, стало быть он привык дизайнить обертку от печенек и мелков против тараканов, наверно даже преуспел, честь ему и хвала. В верстке для веба, с которой, кстати, не всякий даже удачный дизайнер может справиться, по моему мнению, системный вид кнопок - одна из основ. Вот что я думаю о войне во Вьетнаме...

s0rr0w · September 7, 2009

Еще как стоит. Почему то никто не удивляется когда "всемилостивые, системные кнопки" имеют необычный вид, скажем, во Flash'е. Чем же плох яваскрипт?

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

Great Rash · September 7, 2009

Вообще там есть GUI. Не помню в каком пакете хранятся компоненты, но ComboBox там есть (это во-первых). Почему же никто не делает системные кнопки такими, чтоб они были "понятны на интуитивном (читай - инстинкт, читай - юзабилити) уровне" (это во-вторых)?

Я в общем сам за то, чтобы компоненты интерфейса были более-менее стандартными. Если дизайнеру дать волю то он и разметку на дорогах раскрасит под хохлому... но почему бы не сделать скроллбар, скажем, зеленым или не изменить вид кнопки у селекта?

Вот вам отличный пример кастомного селекта - недостатков я не вижу:

http://demos.devexpress.com/ASPxGridViewDe...aderFilter.aspx

В самом верху вы увидите селект (Select Appearance:). Попереключайте стили и посмотрите как изменяется вид этого комбобокса. Неужели плохо?

Justnewone · September 7, 2009

Если бы туда добавили селекцию с клавы (фокус на селекте - печатаем искомую строку - находим без таскалки) - было бы хорошо, никто бы не заметил, но так наверно не сделают. Вот такой вот недостаток. Меня почему-то лишают заложенных возможностей, или, еще хуже, встречал, сабмит, который не сабмитит на клавишу "энтер". Ваще капец!. А цвет там и прочее - это уже дело дезигнерское, где-то даже щегольское "Я потратил целых 2 часа (и это в лучшем случае), какой я крутой" ))) Вобщем, велосипед, без обид, конечно.

Great Rash · September 7, 2009

Разве в обычном селекте есть поиск с клавы (печатаем искомую строку - находим без таскалки)?

В том то и дело, что я хочу сделать не просто селект, а селект с дополнительными возможностями. Который будет нужен в реальных проектах. Но в сети я находил не достаточно функциональные скрипты, плюс эти скрипты были тяжелы для установки обычным пользователем, который не понимает яваскрипт. Я же делаю селект, для установки которого пользователю будет достаточно подключить всего один файл и дальше скрипт сделает все за него сам. Управлять скриптом можно будет из HTML. Т.е. он будет перенимать все свойства обычного селекта (disable, multiple и т.п.), короче говоря будет парсить селект и на его месте через DOM будет строить совершенно новый объект со свойствами старого, но при этом еще и с дополнительными свойствами.

Тут даже не в красивостях дело, а в более обширном функционале. Но и о красивостях забывать не стоит. Никакого "изобретения велосипеда" я тут не вижу.

Justnewone · September 7, 2009

Разве в обычном селекте есть поиск с клавы (печатаем искомую строку - находим без таскалки)?
В том то и дело, что я хочу сделать не просто селект, а селект с дополнительными возможностями. Который будет нужен в реальных проектах. Но в сети я находил не достаточно функциональные скрипты, плюс эти скрипты были тяжелы для установки обычным пользователем, который не понимает яваскрипт. Я же делаю селект, для установки которого пользователю будет достаточно подключить всего один файл и дальше скрипт сделает все за него сам. Управлять скриптом можно будет из HTML. Т.е. он будет перенимать все свойства обычного селекта (disable, multiple и т.п.), короче говоря будет парсить селект и на его месте через DOM будет строить совершенно новый объект со свойствами старого, но при этом еще и с дополнительными свойствами.
Тут даже не в красивостях дело, а в более обширном функционале. Но и о красивостях забывать не стоит. Никакого "изобретения велосипеда" я тут не вижу.

Да, можно, по крайней мере в FF у меня всегда получалось и получается.

А чего не хватает простому селекту? Кроме внешности и кроме, допустим, вложенности, хотя это наверно изврат, я просто попытался пофантазировать ).

Great Rash · September 7, 2009

Ну вот поиска по регулярке не хватает, я не имею ввиду регвыр как в win-приложениях (*, % и т.п.), а например есть у меня список всех стран мира (реальный пример) шарится по нему очень тяжко т.к., сами понимаете, он очень большой. По этому было бы неплохо ввести например "Р" и он найдет все страны на "Р", продолжаю вводить "Ру", и в списке мне отображаются только "Руанда", "Румыния" и т.п.

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

А вложенность это реально изврат.

Justnewone · September 7, 2009

Ну вот поиска по регулярке не хватает, я не имею ввиду регвыр как в win-приложениях (*, % и т.п.), а например есть у меня список всех стран мира (реальный пример) шарится по нему очень тяжко т.к., сами понимаете, он очень большой. По этому было бы неплохо ввести например "Р" и он найдет все страны на "Р", продолжаю вводить "Ру", и в списке мне отображаются только "Руанда", "Румыния" и т.п.

Так это и щас есть, просто кликните чтоб селект выскочил и начните набирать.

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

Чекбокс и мультивыбор - может, а удобно ли это, надо, допустим, не на форуме зарегаца, а выбрать номера счетов - и бегать в маленьком окошке искать отмеченные чекбоксы или радиобатон. Слабо представляю. Более очевидно, поставить 5 селектов рядом и сделать мультивыбор.

s0rr0w · September 7, 2009

Ну вот поиска по регулярке не хватает, я не имею ввиду регвыр как в win-приложениях (*, % и т.п.), а например есть у меня список всех стран мира (реальный пример) шарится по нему очень тяжко т.к., сами понимаете, он очень большой. По этому было бы неплохо ввести например "Р" и он найдет все страны на "Р", продолжаю вводить "Ру", и в списке мне отображаются только "Руанда", "Румыния" и т.п.
Опять же было бы очень не плохо сделать мультивыбор более наглядным - чекбокс рядом с каждой строкой мне кажется удачным решением.
А вложенность это реально изврат.

По первому пункту - это текстовое поле + динамически перезапрашиваемый список. Это не селект.

По второму - а кто мешает мультивыбор делать чекбоксами?

А как в кастомном инпут-элементе решать проблему автозаполнения форм?

Great Rash · September 7, 2009

Вот пять селектов это точно изврат. Вот есть у вас задача выбрать из списка тех же стран 15 штук. Как в этом случае обойтись без мультивыбора?

По второму - а кто мешает мультивыбор делать чекбоксами?

См. выше.

А как в кастомном инпут-элементе решать проблему автозаполнения форм?

Не понимаю о чем вы. Можно подробней.

Edited September 7, 2009 by Great Rash

Sign In

z-index VS SELECT в ie6

Question

Link to comment

Share on other sites

30 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

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