Как верстать "ровные" формы в Firefox, Safari? (CSS)

Если сбросить стили и расположить рядом input text и input button или submit, то в блядском firefox кнопка подпрыгивает вверх, а в сафари (только не том, что на винде), наоборот, кнопка проседает на вниз от строки ввода. Нихера не удаётся их подружить.
Посоветуйте как быть? Если можно на примерах.
Не хотелось бы сильно ментяь и сам дизайн кнопок и полей, но как показывает история формы всегда были геморными, их как буд-то специально делали с западлом!

Если я правильно понял проблему... сам делаю так:
Объявляется таблица из 2х ячеек по горизонтали
[cell_1|cell_2]
У обеих ячеек прописывается вертикальный align - "по середине" (по центру)
В первую ячейку вставляется текстовое поле, во вторую - кнопка.
Всё должно отображаться как надо.
А если без таблиц, то не знаю как сделать.

Vyacheslav писал:

Посоветуйте как быть?

Использовать нормализацию вместо сброса. Стандарт де факто: http://necolas.github.io/normalize.css/

Можно поместить их в div с фиксированной высотой, как вариант.
Может быть, что-то из этого поможет. Например, использование line-height: http://habrahabr.ru/post/64530/

похожие траблы я встречал, когда браузер если не объявлены параметры суест свои
значения или наследует х3 от какого элемента и это реально беситю.

поставь Firebug насчет Safari не заю но у них тоже должен быть какойнибуть плагин для отлова косяков с версткой

я думаю сразу увидеш кто там воду мутит

если не забореш скриншот в студию

Хех, я фаербагом пользуюсь с момента его появления. Ты попробуй как-нить именно формы отрегулировать в виде:

Код:

<input><input type="button">

Крыша поедет!
Я тоже думал, что ничего невозможного нет, когда юзаешь средства разработчика, но это было до моей серьёзной встречи с формами!

^Krot писал:

[cell_1|cell_2]

Макет уже готов, вмешиваться нельзя. Сам до этого так и делал, поэтому столько лет и терпелось!
Yacc: Нормализацию не юзал. Сенкс!

don Rumata писал:

Можно поместить их в div с фиксированной высотой, как вариант.

Попробую, но пока не сильно понимаю.

попробуй через селекторы атрибутов достучатся

я выдрал из таблицы стилий может че лишнего прихватил


вот так я оброщался к type=text
input[type=text], input[type=password]{значения }
вот пример

Код: [развернуть]

input[type=text], input[type=password]{border:1px solid #bac9d3;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0 10px 1px 10px;height:32px;line-height:31px;}

вот так я оброщался к type=button и type=submit

input[type=button], input[type=submit], button{значения}

вот пример

Код: [развернуть]

input[type=button], input[type=submit], button{cursor:pointer;background-color:#2788c6;background: -moz-linear-gradient(top,#3eaede,#1062ad);background: -webkit-gradient(linear,left top, left bottom, from(#3eaede), to(#1062ad));background:linear-gradient(top,#3eaede,#1062ad);border:0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;height:35px;padding:0 5px 4px 5px;min-width:90px;line-height:35px;color:#fff;font-weight:bold;text-align:center;text-shadow:0 -1px #0a4191;}

Vyacheslav: если покажешь конкретную проблему (линк) - попробуем помочь.

Да я вроде разобрался. Меньше надо было с border и padding играться.
Добавил хак для FF с разницей в 2px для padding, остальные броузеры подхватили input {margin:0;padding:0;border:1px outset buttonface} наура.
Всем спасибо.