Центровка текста по вертикали

[szag]

Верстаю сайт http://vsenadomu.ru/ и никак не могу отцентрировать поле поиска

Вот такой код работает в ИЕ7 и FireFox 3 и хроме, но не работает в Opera 9.64. Если поставить padding 0 0 0; убрать vertical-align: bottom и добавить line-height:48x, то работает везде крому firefox sad.gif

/* Search */
#at-search { background: no-repeat left center; position: absolute; top: 21px; left: -10px; z-index: 0; float: right; margin: 0; }
#at-search .inputbox { color: #070000; width: 275px; background: url(../images/search.png) no-repeat; text-transform: none; text-align: center;  padding: 15px 0 0; height: 48px;vertical-align: bottom; border-width: 0; }

.narrow #at-search .inputbox{
	width: 100px;
	height:50px;
}

Может кто-то с подобной проблемой сталкивался?

[mishka]

Запиши на листик и поцепи на стенку:

высота инпута тип текст выравнивается только размером шрифта, высотой строки(line-height), и паддингами. Никаких height

Верхний паддинг, которым пытаешся ровнять этот инпут поцепи на блок с бг, так ты инпут опустишь. И нижний паддинг тому же диву делай, чтобы снизу бг отобразился. Ненадо растягивать его высоту высотой инпута. Ну с инпутом сам поковыряйся, направление я дал.

Edited August 28, 2009 by mishka2

[szag]

Запиши на листик и поцепи на стенку:

высота инпута тип текст выравнивается только размером шрифта, высотой строки(line-height), и паддингами. Никаких height

Верхний паддинг, которым пытаешся ровнять этот инпут поцепи на блок с бг, так ты инпут опустишь. И нижний паддинг тому же диву делай, чтобы снизу бг отобразился. Ненадо растягивать его высоту высотой инпута. Ну с инпутом сам поковыряйся, направление я дал.

А можно немного по подробнее? А то я ничего не понял

[mishka]

Убери с инпута верхний паддинг 15px и поцепи на блок .rokajaxsearch. Убери высоту с инпута. Инпуту font:11px/14px Arial,Helvetica,sans-serif;

Лучше на инпут в пикселях размер шрифта... Станеш более опытным поймешь что к чему будешь и в процентах задавать.

Бг на инпут не вешай если это картинка с круглыми углами(набери в ие6 много текста - поймешь почему). Оберни дивом и диву бг задай.

[and0605]

А где проблема? Чувак нормально так объяснил. Убери height для инпута. Буквально вчера с этой проблемой сидел, и когда увидел что у меня задана height для input[type=text] подумал про себя "во деревня"))))

Вот щас у меня общий стиль для инпутов (копирую прям из файла):

input[type="text"], textarea {
background-color:#FFFFFF;
border:1px solid #A49DDA;
color:DarkSlateBlue;
margin:0;
padding:2px;
text-align:left;
font-family:"Trebuchet MS";
font-size:13px;
}

Словом, высоту меняй только шрифтом. Отступы сверху и снизу (расстояния от границы до мигающего курсора, увеличение приводит к увеличению высоты)- padding

Edited August 28, 2009 by and0605

[szag]

Убери с инпута верхний паддинг 15px и поцепи на блок .rokajaxsearch. Убери высоту с инпута. Инпуту font:11px/14px Arial,Helvetica,sans-serif;

Лучше на инпут в пикселях размер шрифта... Станеш более опытным поймешь что к чему будешь и в процентах задавать.

Бг на инпут не вешай если это картинка с круглыми углами(набери в ие6 много текста - поймешь почему). Оберни дивом и диву бг задай.

Спасибо большое, помогло. Еще такой вопрос: в ИЕ никак не хочет работать поиск аяксовский, при чем демки (с сайта производителя) того же поиска работают в ИЕ. Перепробовал разные поиски от разных контор, ни один не заработал. Во всех остальных браузерах работает нормально. Может он не может наложиться на флэш проигрыватель?