VPF::Проблема с z-index у input в IE6-7 - Форум программистов

vened

Дата 9.3.2010, 17:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 3.3.2010

Репутация: нет
Всего: нет

В общем суть проблемы в том что дизайнер нарисовал нестандартный слект, пришлось извращаться и делать, всё получилось, но в ИЕ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>

blah

Дата 10.3.2010, 00:34 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

По-моему явный перебор с position:relative;. Если убрать его с .field_chek dd и .field_chek input[type="text"], input[type="password"] то все встанет на места, ну а для .selekt ul обычно используют position:absolute

vened

Дата 10.3.2010, 10:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 3.3.2010

Репутация: нет
Всего: нет

Спасип тебе добрый человек, действительно position:relative убрал и помогло)
Сейчас полезу испытаю это в продакшн версии, она значительно отличается

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »