Это MWEB.RU

Не узнаешь, %username%?

Пропустить

Выравнивание select и input

Старый mweb

Модератор: [mweb team]

Ответить

Выравнивание select и input

Сообщение Berezkin Пт янв 30, 2009 16:05

Возникла такая проблема:
Есть таблица шириной 100%, разбитая на 2 колонки. В каждой колонке есть поля формы, а именно <select> и <input type="text">, стоят они друг под другом. Эти поля формы растянуты по ширине ячейки, т.е. у них тоже стоит ширина 100%.
Загвоздка в том, что (в Мозилле) ширина у селекта получается меньше ширины инпута. Да и инпут вылезает за пределы паддинга ячейки справа.
Для наглядности вот код:
Код: Выделить всё
<?xml version="1.0" encoding="utf-8"?>

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

<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1" style="width: 100%;">
   <tr>
      <td style="padding: 5px; width: 50%;">
            <select style="width: 100%;">
               <option>111</option>
               <option>222</option>
            </select><br />
            <input style="width: 100%;" type="text" size="3" name="text" value="" />
      </td>
      <td style="padding: 5px; width: 50%;">
            <select style="width: 100%;">
               <option>111</option>
               <option>222</option>
            </select><br />
            <input style="width: 100%;" type="text" name="text" value="" />
      </td>
   </tr>
</table>
</form>

</body>
</html>


Причем в IE (нифигасе) все нормально...
Как выровнять все это дело и победить эти проклятые формы.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу
Вернуться к началу

Re: Выравнивание select и input

Сообщение Padonak Пт янв 30, 2009 16:52

Код: Выделить всё
<?xml version="1.0" encoding="utf-8"?>

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

<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<form action="" method="post">
<table cellpadding="5" cellspacing="0" border="1" style="width: 100%;">
   <tr>
      <td style="width: 50%;">
            <select style="width: 100%;">
               <option>111</option>
               <option>222</option>
            </select><br />
            <input style="width: 100%;" type="text" size="3" name="text" value="" /></td>
      <td style="width: 50%;">
            <select style="width: 100%;">
               <option>111</option>
               <option>222</option>
            </select><br />
            <input style="width: 100%;" type="text" name="text" value="" /></td>
   </tr>
</table>
</form>
<script type="text/javascript">
var tds = document.getElementsByTagName("TD");
for(var i = 0; i < tds.length; i++){
if(tds[i].lastChild.tagName != "INPUT"){continue;}
else{
if(tds[i].lastChild.attributes["name"].nodeValue == "text"){tds[i].lastChild.style.width = tds[i].offsetWidth - 10 + "px";};
}
}
</script>
</body>
</html>


-06-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Выравнивание select и input

Сообщение Berezkin Пт янв 30, 2009 17:11

Padonak
Только тогда в IE все разъедется, да и не знаю я будет ли форма в таблице или в диве. Внутри дива селект и инпут ведут себя совершенно по другому. В Мозилле инпут вылезает за пределы дива, а в ИЕ у инпута появляется 2-х пиксельный отступ справа от границы дива... И это еще без маргинов/паддингов, с ними наверно вообще поедет все как попало.
Задолбался уже их выравнивать...
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу
Вернуться к началу

Re: Выравнивание select и input

Сообщение Padonak Пт янв 30, 2009 17:26

Berezkin писал(а):Padonak
Только тогда в IE все разъедется...


ie.jpg
ie.jpg (35.76 Кб) Просмотров: 13046
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Выравнивание select и input

Сообщение Berezkin Пт янв 30, 2009 17:52

1.jpg
1.jpg (13.36 Кб) Просмотров: 13037
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу
Вернуться к началу

Re: Выравнивание select и input

Сообщение Padonak Пт янв 30, 2009 17:54

мы говорим об одном и том же скрипте? :-)
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Выравнивание select и input

Сообщение Berezkin Пт янв 30, 2009 18:47

Об вот этом:
Код: Выделить всё
<script type="text/javascript">
var tds = document.getElementsByTagName("TD");
for(var i = 0; i < tds.length; i++){
if(tds[i].lastChild.tagName != "INPUT"){continue;}
else{
if(tds[i].lastChild.attributes["name"].nodeValue == "text"){tds[i].lastChild.style.width = tds[i].offsetWidth - 10 + "px";};
}
}
</script>


Ну правда не пашет...
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу
Вернуться к началу

Re: Выравнивание select и input

Сообщение Muerto Пт янв 30, 2009 19:59

Если уж таблицу в форму засунули...
Код: Выделить всё
<?xml version="1.0" encoding="utf-8"?>

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

<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <style type="text/css">
   .iefix {
    padding-right:11px;
   }
   * HTML .iefix {
    padding-right:10px; // сколько надо для шестерки
   }
   </style>
</head>

<body>

<form action="" method="post">
<table cellpadding="5" cellspacing="0" border="1" width="100%">
   <tr>
      <td>
        <select style="width: 100%;">
            <option>111</option>
            <option>222</option>
            </select>
      </td>
      
      <td>
      <select style="width: 100%;">
               <option>111</option>
               <option>222</option>
            </select>
      </td> 
</tr>      
    <tr>
      <td class="iefix">
            <input style="width:100%;" type="text" name="text" value="" />
      </td>
      <td class="iefix">
            <input style="width:100%;" type="text" name="text" value="" />
      </td>
   </tr>
</table>
</form>
</body>
</html>

У меня шестерки под рукой нет - сам поставь на глазок отступ.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва
Вернуться к началу

Re: Выравнивание select и input

Сообщение Padonak Пт янв 30, 2009 21:16

бля мало того что я проверил в Опере и в ИЕ когда его накалякал с рабочего компа жены теперь я не поленился принести его на флешке домой и проверил в Опере ФФ и ИЕ. разумеецо все работает. Березкин ты нафига меня дуришь? либо ты изменил страницу либо переставил скрипт выше формы либо хз но в том контексте как я давал все работает
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону
Вернуться к началу

Re: Выравнивание select и input

Сообщение Berezkin Пн фев 02, 2009 11:47

Padonak
Ну нафига мне тебя дурить...
Все сделал тупо CTRL+C, CTRL+V. Вот прямо сейчас попробовал снова... хм, работает вроде (как я смотрел раньше хз), но только странно: в Мозилле и ИЕ пропала резина.
Все сделал уже по другому: взял тег INPUT в див, у инпута убрал бордер, а у дива поставил. Диву задал ширину 100%, а инпуту - 95%, тогда получается эмуляция красивого инпута в ИЕ и Мозилле, за исключением того, что небольшой хвостик в конце будет не активный, но думаю это не критично, большинство юзеров этого не заметят.
Правда не знаю можно ли убирать бордер у инпута в Опере, но по ТЗ только под ИЕ и Мозиллу требуют, так что даже проверять не стал.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу
Вернуться к началу
Ответить

Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1



1998–2008 © Все интересы учтены. Команда mweb
Работает на движке phpBB

Рейтинг@Mail.ru

cron