Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Search form
цитата
27/01/09 в 17:23
 taljanich
Search форма
собственно трабла(только в ИЕ):


в опере и мозилле всё ок...

при вёрстке делалось так в html

Код:
         <div class="SearchForm">
           <input autocomplete="off" name="SearchField" type="search" class="SearchInput"/>      
         </div>


и так в css

Код:
.SearchForm {
   float: left;
   height: 40px;
   width: 134px;
   padding-left: 10px;
}


помогите плиз -)) как решить такое. форма куда то уезжает мать её...
цитата
27/01/09 в 17:31
 Petek
а для класса SearchInput что в css указано?
цитата
27/01/09 в 17:35
 taljanich


вот:
Код:

.SearchInput{
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   line-height:normal;
   color:#000000;
   width:110px;
   height:23px;
   background:url("images/BackgroundSearchInput.gif") 0 0 no-repeat;
   float: left;
   padding-right: 50px;
   padding-left: 20px;
   font-weight: normal;
   position: absolute;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   margin-top: 8px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-top: 4px;
   padding-bottom: 4px;
}
цитата
27/01/09 в 18:04
 Petek
нипанятна icon_smile.gif
чёто не пойму, почему бэкграунд в инпуте смещается влево

а вообще код css здоровый,
все бордеры и маргины лучше так записать
border: 0;
margin: 0;
цитата
27/01/09 в 18:45
 taljanich
трындец как нипанятна... полдня борюсь... icon_smile.gif
цитата
27/01/09 в 22:18
 Skat
понакрутил что то ты и float и absolule

Код:

float: left;
...
   position: absolute;



пикча точно нормально вырезана?
цитата
28/01/09 в 00:09
 pinnokio
Ух, это конечно жестко
Код:
padding-right: 50px;
   padding-left: 20px;
   font-weight: normal;
   position: absolute;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   margin-top: 8px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-top: 4px;
   padding-bottom: 4px;

Код можно сократить вот так:
Код:

   position: absolute;
   padding:4px 50px 4px 20px;
   margin:8px 0px 0px0px;
   border:0px;


Это Код:
position: absolute;
лучше заменить Код:
position: relative;
либо не описывать вообще.

И, наконец, по сабжу.
Вот этот имидж
Код:
background:url("images/BackgroundSearchInput.gif") no-repeat;

лучше поставить в бэкграунд твоему диву div class="SearchForm", так как в ИЕ6 бэкграунд инпут-формы будет "уплывать" в правую сторну, вместе с вводимым текстом. В твоем случае, после 100-го введенного символа, скорее всего, бэкгруанд вообще скроется из поля зрения.

ЗЫ как вариант, можешь "подпереть" инпут форму со сторон двумя дивами с закругленными бэкграундами. А полю ввода дать бекграунд с репит-х.
цитата
28/01/09 в 00:16
 pinnokio
Petek писал:
нипанятна icon_smile.gif
чёто не пойму, почему бэкграунд в инпуте смещается влево

При данной верстке, в ИЕ6 его туда смещает вводимый текст.
цитата
28/01/09 в 02:36
 taljanich
спасибо всем! всех оценил -))
завтра буду изголяться -))


Эта страница в полной версии