Верстка формы поиска

[netcat-na-diary]

При верстке формы поиска такого вида



html-код

<div id="search">
                <p>Поиск</p>
                    открывающий тег form  [name="search" method="get" action=""]
                        <input type="text" name="" class="searchField" placeholder="Найти нужное..." /> 
                        <input type="submit" value="" class="searchButton" />
                    закрывающий тег /form
            </div>

стили

#search {
    position: relative;
    width: 178
    margin-left: 762
    padding: 60px 0 0 12 
}

#search p {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16
    color: #557782;
    margin: 0;
}

#search form  {
    margin-top: 10
    position: relative;
    width: 142
    padding: 0 25px 0 0;

}

#search form input.searchField {
    background: url('../images/search_background.png') no-repeat;
    width: 122
    height: 37
    border: none;
    font-family: 'Tahoma', sans-serif;
    font-size: 12
    color: #8e9ea4;
    padding-left: 10
    padding-right: 35
    -webkit-appearance: none;
    outline: none;
}

#search form input.searchButton {
    background: url('../images/search_button.png') top no-repeat;
    width: 25
    height: 33
    border: none;
    cursor: pointer;
    position: absolute;
    top: 2
    left: 140
}

#search form input.searchButton:hover {
    background: url('../images/search_button_hover.png') no-repeat;
}

#search form input.searchButton:active {
    background: url('../images/search_button_active.png') no-repeat;
}

в браузерах IE9 и IE8, когда в поисковое поле вводится длинная строка, она начинает наползать на левую границу текстового поля



а в IE7 начинает сдвигаться влево само поле



РЕШЕНИЕ

input type="text" обернуть в div, для которого прописать стили (задать бэкграунд и тд.)

<div id="search">
				<p>Поиск</p>
					открывающий тег form  [name="search" method="get" action=""]
						<div class="searchField"><input type="text" name="" placeholder="Найти нужное..." /></div>
						<input type="submit" value="" class="searchButton" />
					закрывающий тег /form
			</div>

стили

#search {
	position: relative;
	width: 178
	margin-left: 762
	padding: 60px 0 0 12 
}

#search p {
	font-family: 'Trebuchet MS', sans-serif;
	font-size: 16
	color: #557782;
	margin: 0;
}

#search form  {
	margin-top: 10
	position: relative;
	width: 142
	padding: 0 25px 0 0;
	
}

/*---------------------------------------------------------------------------------*/

#search form .searchField {
	background: url('../images/search_background.png') no-repeat;
	width: 157
	height: 37
	padding-left: 10
}

#search form .searchField  input {
	background: transparent;
	width: 122
	height: 37
	outline: none;
	padding-right: 5
	border: none;
	font-family: 'Tahoma', sans-serif;
	font-size: 12
	color: #8e9ea4;
	-webkit-appearance: none;
}

/*---------------------------------------------------------------------------------*/

#search form input.searchButton {
	background: url('../images/search_button.png') top no-repeat;
	width: 25
	height: 33
	border: none;
	cursor: pointer;
	position: absolute;
	top: 2
	left: 140
}

#search form input.searchButton:hover {
	background: url('../images/search_button_hover.png') no-repeat;
}

#search form input.searchButton:active {
	background: url('../images/search_button_active.png') no-repeat;
}

+ свои стили для IE9, IE8 и IE7

Ссылка на обсуждение на хэшкоде линк