В общем суть проблемы в том что дизайнер нарисовал нестандартный слект, пришлось извращаться и делать, всё получилось, но в ИЕ6-7 форма работает не адекватно, уже всю голову сломал
Суть проблемы можно увидеть на скриншотах:
Firefox - http://prntscr.com/52bt
IE7 - http://prntscr.com/52c1
Нижележащий input в ИЕ лезет на верх по z-index
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page title</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
.field_chek {clear:both;padding:0;margin:0 0 30px 0;padding:0 0 0 165px;}
.field_chek input[type="text"], input[type="password"] {position:relative;width:223px;height:25px;padding:0 0 0 5px;border:1px solid red}
.field_chek:after{content: '.';display: block;clear:both;visibility: hidden;height:0;font-size:0;}
.field_chek dt {position:relative;left:-160px;float:left;width:150px;text-align:right;margin:0 -150px 0 0;padding:0;color:#8DB900}
.field_chek dt label {margin:0;}
.field_chek dd {position:relative;float:left;margin:0}
.selekt{position:relative;width:150px;height:23px;padding:0 21px 0 8px;border:1px solid red}
.selekt:hover{cursor:pointer;}
.selekt ul{position:relative;z-index:1000;display:none;height:100px;margin:4px -21px 0 -8px;padding:0;overflow:auto;list-style:none;border:1px solid #a5bf45;background:#fff}
.selekt:hover ul{display:block}
.selekt ul a{display:block;padding:0 21px 0 8px;color:#FE4700;text-decoration:none;line-height:1.6em;}
.selekt ul a:hover{background:#EFFFB4}
</style>
<!--[if lt IE 8]>
<style>
.field_chek{zoom:1}
.field_chek input[type="text"], input[type="password"] {margin:-1px 0 0 0}
.field_chek{zoom:1}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<dl class="field_chek">
<dt>Country:</dt>
<dd>
<div class="selekt">
Select Country
<ul>
<li><a href="#">реальное имя</a></li>
<li><a href="#">реальное имя</a></li>
<li><a href="#">реальное имя</a></li>
<li><a href="#">реальное имя</a></li>
</ul>
</div>
</dd>
</dl>
<dl class="field_chek">
<dt><label for="name">Billing Address:</label></dt>
<dd class="fild_container">
<input type="text" name="name" id="name" />
</dd>
</dl>
</div>
</body>
</html>
|
|