CSS работает только в Firefox

Question

Я пытаюсь создать текстовое поле поиска, как на веб-сайте Apple .

HTML выглядит так:

<div class="frm-search">
   <div>
  <input class="btn" type="image" src="http://www.wdmadvertising.com.au/preview/cfs/i/btn-search.gif" />
     <input type="hidden" name="cx" value="012437731193502990522:kx_jllw0ckq" />
     <input type="hidden" name="cof" value="FORID:11;NB:1" />
     <input type="hidden" name="ie" value="UTF-8" />
     <input class="btn text" type="text" name="q" size="30" />
     <input type="submit" class="hide" name="sa" value="Search" />
   </div>
 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box"></script>
</div>

CSS выглядит так:

.header .frm-search{
 width:178px;
/* overflow:hidden;   */
 padding:0 18px 0 0;
 float:right;
 background:none;
/* border-right:1px solid #a9a8a9;  */
}
.header .frm-search .text{
 background:url(../i/bg-search.gif) no-repeat;
 float:right;
 margin:10px 0 0;
 width:158px;
 padding-top: 5px;

}
.header .frm-search .text input{
 width:148px;
 border-style:none;
 background:none;
 font:12px/13px "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
 padding:5px;
 color:#a2a2a2;
}
.header .frm-search .btn {
 float:left;
 margin:10px 0 0;
 border: 0;
 height: 23px;
 display: block;
 margin-top: 0;
}

#searchresults {
 padding-left: 40px;
}

.header input.button {
 display: none;
}


div.header input.hide {
 display: none;
}

А предварительный просмотр выглядит так: [ссылка удалена]

Answer 1

Мне кажется, что input [type = text] и input [type = image] не помещаются в контейнер, а верхнее поле для input [type = text] сдвигает его вниз.

Увеличение ширины в форме немного шире в IE8.

Если вы собираетесь поддерживать IE6, помните о сломанной рамке и не указывайте отступы и поля для одного и того же элемента.