лучший способ отформатировать интервал для формы ввода HTML

Question

У меня есть следующий код, который в основном является формой ввода, так как теперь у меня есть интервал между заголовком каждого поля и полем, все правильно выстроены при выполнении в моем браузере, но когда я пробую его в другом браузере, некоторые из интервал выключен, каков наилучший способ выровнять ввод так, чтобы он отображался одинаково во всех браузерах?

<div style="z-index:12; position:absolute">
<font style="color:#FF6600; font-family:pirulen">
*Name: <input type="text" name="name" style=" margin-left:70px" size="30px" /><br/>
*Email: <input type="email" name="email"  style="margin-left:70px; margin-top:5px; " size="30px"  /><br/>
Company: <input type="text" name="company"  style="margin-left:28px; margin-top:5px"  size="30px" /><br/>
Address: <input type="text" name="address"  style="margin-left:30px; margin-top:5px"  size="30px" /><br/>
Address 2: <input type="text" name="address2"  style="margin-left:10px; margin-top:5px"  size="30px" /><br/>
City: <input type="text" name="city"  style="margin-left:92px; margin-top:5px"  size="30px" /><br/>
State: <input type="text" name="state"  style="margin-left:65px; margin-top:5px"  size="30px" /><br/>
Zip: <input type="text" name="zip"  style="margin-left:106px; margin-top:5px"  size="30px" /><br/>
*Phone: <input type="text" name="phone"  style="margin-left:58px; margin-top:5px"  size="30px" /><br/>
*Comments:<textarea style=" margin-left:12px; margin-top:5px; vertical-align:top; resize:none"   name="comments" cols="30" rows="10" draggable="false"></textarea><br/>
<input type="submit" value="Submit" style="margin-left:150px" />

Спасибо

Answer 1

Это довольно хорошо покрывает это:

http://www.alistapart.com/articles/prettyaccessibleforms

Стилизованный неупорядоченный список, метки и входные данные.

Answer 2

Просто используйте таблицу с метками (заголовками) в одном столбце, полями в другом. Сделав это, вы можете легко протестировать различные стилистические настройки. Рендеринг по умолчанию (поля выровнены по левому краю) не так уж и плох, но рассмотрите возможность выравнивания меток по правому краю; Вы можете найти это даже лучше. Вам не понадобится ширина пикселей, поскольку браузеры автоматически увеличивают ширину каждого столбца до необходимого для самого широкого содержимого ячейки. Никакой другой подход не делает этого, кроме использования CSS для имитации таблицы HTML (неуклюжий способ, который не работает на многих версиях IE, которые все еще используются).