Разметка формы обратной связи

[Tohin]

Пример кода http://jsfiddle.net/FkWuR/

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

В идеале должно быть так:

В Хроме 16, IE 8, Opera8.54 отображается примерно так как хочется.

В ИЕ7 все идет столбиком. В FF поле E-mail сползает вниз.

Андроидный браузер переносит поле Тема на новую строку...

HTML

<div class="feedback">

<form class="content2" method="post" action="index.php?id=8">
	<input name="formid" value="feedbackForm" type="hidden">

	<p><label accesskey="n">Имя*<input name="Name" size="20" maxlength="60" type="text"></label></p>
 	<p><label accesskey="f">Фамилия<input name="Surname" size="20" maxlength="60" type="text"></label></p>
	<p><label accesskey="e">E-mail*<input name="email" size="20" maxlength="40" type="text"></label></p>
	<p><label accesskey="s">Тема*<select name="subject">
		<option selected="selected" value="Запрос поддержки">Вопрос</option>
		<option value="Проблемы с сайтом">Замечания по работе сайта</option>
		<option value="Общие вопросы">Общие вопросы</option>
		</select></label></p>
 	<p><label accesskey="c">Текст письма
	<textarea cols="40" rows="10" name="comments"></textarea></label></p>

	<p class="break">Пожалуйста введите код (чтобы предупредить спам):</p>
<p class="line">
	<img src="index.php_files/veriword.jpg" alt="verification code">
	<input name="vericode" size="20" type="text">
	<input id="sbmt" name="submit" value="Отправить" type="submit"></p>
</form>
</div>

CSS

.feedback {width: 600px;color: #999;padding-bottom:30px; margin: 50px 0 0 50px}
.feedback, .feedback input, .feedback select, .feedback textarea  {border: solid 1px #999;}
.feedback input, .feedback select, .feedback textarea, p.break {display:block; margin-bottom:5px;}
.feedback textarea {width:540px;}
.feedback p  {display: inline-block; margin:5px 30px 0}
.line img, .line input	{display: inline; margin: 0 20px;}
#sbmt {background: none repeat scroll 0 0 black; color: white;}

Edited April 14, 2012 by Tohin

[alex_anderr]

Я в таких случаях верстаю каждую "линию" формы в новом диве.

А внутри делю на два, левый и правый. И во всех браузерах и телефонах корректно. Да и проще сделать как хочется как на картинке выше.

[Tohin]

Я в таких случаях верстаю каждую "линию" формы в новом диве.

А внутри делю на два, левый и правый.

То есть линия div, внутри еще два div'а, внутри label и внутри label'а input/select?

Как-то кучеряво выходит.... И у меня заставить это заработать не получилось... Может table?

[hypnocolor]

Ну, как вариант, можно попробовать вот так. Возможно, можно еще что-то улучшить/оптимизировать, просто временем сейчас не сильно богат)

[Tohin]

Ну, как вариант, можно попробовать вот так. Возможно, можно еще что-то улучшить/оптимизировать, просто временем сейчас не сильно богат)

Спасибо. Пока не вкурил, что это за уличная магия и почему не работает первый вариант.

Условия использования предложенного кода? Ссылки на авторство?

[hypnocolor]

Tohin, да пользуйтесь на здоровье, как заблагорассудится

[alex_anderr]

Я в таких случаях верстаю каждую "линию" формы в новом диве.

А внутри делю на два, левый и правый.

То есть линия div, внутри еще два div'а, внутри label и внутри label'а input/select?

Как-то кучеряво выходит.... И у меня заставить это заработать не получилось... Может table?

Да, так.

У меня вполне работает.

<div class='blocks'>
   <div class='left'>
      <label><input /></label>
   </div>
   <div class='right'>
      <label><input /></label>
   </div>
</div>
<div class='blocks'>
   <div class='left'>
      <label><input /></label>
   </div>
   <div class='right'>
      <label><input /></label>
   </div>
</div>

Зато все ровненько всегда

--

У hypnocolor тоже неплохой вариант )

Edited April 23, 2012 by alex_anderr