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

Question

Я пытаюсь создать текстовое поле поиска, например, на Apple website.

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

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

Создание ширины в форме немного шире, похоже, делает трюк в IE8.

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