Форум Сайтостроение Веб-строительство

select и разные браузеры

F
На сайте с 24.04.2009
Offline
45
Fearful
1169

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

В опере все ровненько и красивенько. И файрфоксе и ие select меньше по высоте. Попытки задать высоту в ручную приводят к тому что в ие селект растет по высоте верх, а в файрфоксе вниз. В итоге все попытки добиться вот такого вида как на вложении ни к чему не приводят. Собственно вопрос. Как добиться одинаковой высоты input'a select'a во всех браузерах.

jpg 1.jpg
H
На сайте с 13.06.2011
Offline
9
Haubergeon
#1

про vertical-align не забывай) а высоту уже подбери нужную

Слово не воробей. Все не воробей, кроме воробья!
F
На сайте с 24.04.2009
Offline
45
Fearful
#2
Haubergeon:
про vertical-align не забывай) а высоту уже подбери нужную

спасибо за подсказку

З.Ы. а как избавиться от того что ие текст внутри селекта прижимает к низу?

H
На сайте с 13.06.2011
Offline
9
Haubergeon
#3 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<style>
		.wrapper {width: 960px; margin: 100px auto;}
		.wrapper input,.wrapper select {
			margin: 0; 
			padding: 0;
			outline: 0;
			border: 1px solid;
			vertical-align: middle;
		}
		.wrapper input {height: 20px;}
		.wrapper select {height: 22px;}
	</style>
</head>
<body>

<div class="wrapper">
	<input type="text" value="" />
	<select>
		<option>option1</option>
		<option>option2</option>
		<option>option3</option>
		<option>option4</option>
		<option>option5</option>
	</select>
</div>

</body>
</html>
F
На сайте с 24.04.2009
Offline
45
Fearful
#4

Вот такой результат выходит как во вложении

Для наглядности провел линии.

jpg 2.jpg

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий