Приёмы XHTML-вёрстки
Тэг select проблемное место IE6 ?
21 января 2008 Как известно select это проблемное место IE6, его невозможно оформить css, но в этом примере рассмотрим другую ошибку Microsoft'а. Допустим у нас есть выпадающее меню, а ниже расположен выпадающий список select. Когда меню раскрывается и попадает в область, где расположен select, select отображается поверх меню, хотя должен быть под ним.Как известно select это проблемное место IE6, его невозможно оформить css, но в этом примере рассмотрим другую ошибку Microsoft'а. Допустим у нас есть выпадающее меню, а ниже расположен выпадающий список select. Когда меню раскрывается и попадает в область, где расположен select, select отображается поверх меню, хотя должен быть под ним.
Данный пример 100% работает в:
Internet Explorer 5.5
Internet Explorer 6
Internet Explorer 7
Firefox
Opera
<!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="ru" lang="ru">
<head>
<title>Заголовок страницы</title>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
<style>
body {background:#eeeeee;}
a {color:white}
.frame {
position:absolute;
width: 150px;
height: 90px;
filter:alpha(opacity=0);
z-index: -1; /** необходим для работы ссылок в абсолютном диве **/
}
.top {
position: absolute;
left: 50px;
top: 10px; width: 150px;
height: 150px;
color: #c88;
background:#666666;
color:white;
}
</style>
</head>
<body>
<div class="top">
<iframe scrolling="no" frameborder="0" class="frame"></iframe>
<a href="#">Содержимое</a><br>накладываемого<br>слоя
</div>
<select>
<option value="1">текст опции будет перекрыт</option>
<option value="2">текст опции 2</option>
<option value="3">текст опции 3</option>
</select>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Заголовок страницы</title>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type" />
<style>
body {background:#eeeeee;}
a {color:white}
.frame {
position:absolute;
width: 150px;
height: 90px;
filter:alpha(opacity=0);
z-index: -1; /** необходим для работы ссылок в абсолютном диве **/
}
.top {
position: absolute;
left: 50px;
top: 10px; width: 150px;
height: 150px;
color: #c88;
background:#666666;
color:white;
}
</style>
</head>
<body>
<div class="top">
<iframe scrolling="no" frameborder="0" class="frame"></iframe>
<a href="#">Содержимое</a><br>накладываемого<br>слоя
</div>
<select>
<option value="1">текст опции будет перекрыт</option>
<option value="2">текст опции 2</option>
<option value="3">текст опции 3</option>
</select>
</body>
</html>