In the layout of the search field of this type
html code
<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>
styles
#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; }
in the browser ie9 and ie8 when a long line is entered in the search field, it starts to crawl to the left border of the text field
and in ie7 the field itself begins to move to the left
tell me how you can solve this problem?
Here is the code http://jsfiddle.net/eetZz/5/ , but for some reason nothing is displayed on jsfiddle, although all the pictures are flooded.