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

[Heidel]

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



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: 178px;
    margin-left: 762px;
    padding: 60px 0 0 12px; 
}

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

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

}

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

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

#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: 178px;
	margin-left: 762px;
	padding: 60px 0 0 12px; 
}

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

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

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

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

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

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

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

#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

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

@темы: HTML, IE7, Верстка, IE9, Браузеры, CSS, IE8, Ссылки