Xpoint
   [напомнить пароль]

Помогите отформатировать кнопку

Метки: [без меток]
2008-08-06 21:58:43 [обр] xxx+++(0/10)[досье]

Привет.
Помню, давно на форуме было обсуждение этой проблемы(?), сейчас не нашел.

Есть стандартный код - текстовое поле и графическая кнопка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
   <style type="text/css">
   #user_mail{
      font-size:15px;
   }
   #b{
      /* margin-bottom:-5px; */
   }
   </style>
</head><body>

<form method="post">
   <input type="text" name="user_mail" id="user_mail" />
   <input id="b" type="image" src="http://mensland.ru.mastertest.ru/desing/get_rezults.jpg" />
</form>

</body></html>

Беда в том, что кнопка и текстовое поле находятся визуально не на одной линии. Существует какое-либо универсальное решение, что бы разместить эти элементы "красиво"? Соответственно, нужно кроссброузерное решение + не зависимость от размера шрифтов.

Я кроме как присвоить отрицательный нижний margin для кнопки пока ничего придумать не смог.

спустя 2 часа 40 минут [обр] Иван Неретин(0/8)[досье]
Отрицательный нижний margin для кнопки - это, я бы сказал, плевок в лицо самой идее независимости от размера шрифтов (не знаю насчёт кроссбраузерности, но тоже подозреваю худшее). Лучше уж запихните их в таблицу с vertical-align:middle.
спустя 2 часа 16 минут [обр] Евгений Петров(172/1055)[досье]
#b{vertical-align:middle;}
?
спустя 2 минуты [обр] Евгений Петров(172/1055)[досье]
или
form *{vertical-align:middle;}
спустя 11 минут [обр] xxx+++(0/10)[досье]

Иван Неретин[досье] Таблицы — это ещё больший плевок.

Евгений Петров[досье] Нет, это не работает. Надо что бы кнопочка всегда была посередине, т.е. её центральная горизонтальная ось совпадала с центральной горизонтальной осью текстового поля.

спустя 12 часов [обр] Thirteensmay(3/157)[досье]
Так а при каких условиях при form *{vertical-align:middle;} она не посередине ? При малом контейнере переносится на др. строку ? ну добавьте <nobr> или white-space: nowrap
спустя 1 месяц 5 дней [обр] Lex85[досье]
<table>
  <tr>
    <td><input type="text" name="user_mail" id="user_mail" /></td>
    <td><input id="b" type="image" src="http://mensland.ru.mastertest.ru/desing/get_rezults.jpg" /></td>
  </tr>
</table>
Powered by POEM™ Engine Copyright © 2002-2005