[SergeyNetIt]

Для input установил padding для левого и правого края отступ в padding:0 70px 0 20px;. Во всех браузерах работает правильно, кроме IE
Вот как отображается во всех браузерах http://joxi.ru/pzTAUhjKTJBmHAemBsw
А так отображается в IE http://joxi.ru/wDTAUv3JTJCxEUNG4OU
Введенный текст залазит и на кнопку Поиск.
В чем проблема?
Вот структура html

Код HTML:

 <form action="/" method="get"> <input type="text" name="s" id="s" class="findText" value="<?php the_search_query();?>"placeholder="Поиск на сайте..."> <a href="javascript:document.forms[0].submit();" class="click" ></a> </form>

Вот примененные стили

Код HTML:

.search{
	width: 150px;
	height: 24px;
	margin: 20px 0 0 24px;
	border-radius: 30px;
	background:url(./img/bg-find.jpg);
	position: relative;
}
.search input[type="text"]:hover{
	 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.search input[type="text"]:focus{
	background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 0 3px #80A62D;
    color:#000;
}
.search input[type="text"]{
	width: 150px;
	height: 24px;
	float: left;
	border: medium none;
	border-radius: 30px;
	background:url(./img/bg-find.jpg);
	color:#fff;
	font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 24px;
	padding:0 70px 0 20px;
}
.click{
	width: 68px;
	height: 22px;
	position: absolute;
	right:-90px;
	top:1px;
	float:left;
	background: url(./img/button-find-sprite.png) no-repeat;
}
.click:hover{
	width: 68px;
	height: 22px;
	background: url(./img/button-find-sprite.png) no-repeat  0 -22px;
}

Эффект можно увидить здесь http://fr3809bb.bget.ru

[StelS]

На маргин замените :)

[SergeyNetIt]

StelS,Какой margin. Вы ообще вникали в суть моей проблемы. Padding нужен мне, чтобы задать внутри input внутренние отступы. Какой тут margin
.

---------- Сообщение добавлено 17:38 ---------- Предыдущее 17:25 ----------

SergeyNetIt,Вот наглядно отступы есть http://joxi.ru/hkDAUv3JTJCQETxoJqM
А вот в IE http://joxi.ru/60HAUv3JTJCaEduF0u0

---------- Сообщение добавлено 17:40 ---------- Предыдущее 17:38 ----------

SergeyNetIt,Вот наглядно отступы есть http://joxi.ru/hkDAUv3JTJCQETxoJqM
А вот в IE http://joxi.ru/60HAUv3JTJCaEduF0u0

[StelS]

SergeyNetIt, если задать маргин и уменьшить ширину на его размер - то получится тоже самое, только ездить не будет :)
P.S. удобней обрамить инпут в див и все стилевое оформление для него задать. Тогда и багов таких не будет

[SergeyNetIt]

StelS,У меня обрамлен инпут в див. Вот

PHP код:

<div class="search">
        <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </div>

Это класс search

[StelS]

SergeyNetIt, у вас вся форма обрамлена, а я говорю непосредственно про инпут :)

[SergeyNetIt]

StelS,А толку. Вы, что не смотрели стили и не вникли в проблему. Толку от этого, что я оберну input в еще один див. Мне нужно применить свойства к input, а не к блок
Вот что получилось

PHP код:

<form action="/" method="get">
            <div  class="findText" ><input type="text" name="s" id="s" value="<?php the_search_query();?>"placeholder="Поиск на сайте..."></div>
            <!--<a href="javascript:document.forms[0].submit();" class="click" ></a>-->
        </form>

Результат http://joxi.ru/IU3AUv3JTJCdEezo8FU

---------- Сообщение добавлено 18:31 ---------- Предыдущее 18:26 ----------

StelS,Я то буду опять менять для блока. А мне нужно цвет и высоту для input же задавать

---------- Сообщение добавлено 18:36 ---------- Предыдущее 18:31 ----------

StelS,Input у меня должен быть на всю ширину блока. При подведении курсора срабатывает hover, а при нажатии кнопкой мыши на поле - тоже подсвечивается ВСЕ поле input, которое занимает всю ширину блока

Код HTML:

.search input[type="text"]{
	width: 150px;
	height: 24px;
	float: left;
	border: medium none;
	border-radius: 30px;
	background:url(./img/bg-find.jpg);
	color:#fff;
	font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 24px;
	padding:0 70px 0 20px;
}

[SergeyNetIt]

SergeyNetIt, Не когда с таким не сталкивался. Помогите, плиз!