Форма, submit выше text на 1px

enemo · February 8, 2011

Задача - получить одинаковые по высоте поле ввода и submit.

Код:

  
<style type="text/css">

input.search-fields {
 font-family: Verdana, monospace;
 font-size: 14px;
 color:#FFFFFF;
 background-color:#000000;
 border: 2px solid #000;
 padding: 2px; margin: 0; outline: none;
 height: 19px;
}

input.search-fields[type="submit"] {
 text-align: center;
 height: 27px; 

} 
</style>

</head>
<body>
	<form id="search" action="search.html" method="GET">
		<input name="search-text" type="text" size="15" class="search-fields" id="search-text" autocomplete="off">
		<input type="submit" class="search-fields" value=" >> ">
	</form>
</body>
</html>

В IE8 и FF3.6 получаю такую картинку:

Никак не пойму, откуда берётся лишний пиксел над полем ввода. Если уменьшить высоту сабмита на 1 пиксел - то по верхней границе они выравниваются.

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

Great Rash · February 8, 2011

vertical-align: bottom; обоим элементам

enemo · February 8, 2011

Шаман!

Огромное спасибо, получилось.

Тяжела доля новичка.

Vlad · February 8, 2011

В принципе, достаточно кнопке только vertical-align задать.

Sign In

Форма, submit выше text на 1px

Question

enemo

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

enemo

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information