Question

I am trying to create a search text-field like on the Apple website.

The HTML looks like this:

<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>

The CSS looks like this:

.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;
}

And a live preview looks like this: [link removed]

Answer 1

It looks to me like the input[type=text] and the input[type=image] both do not fit in the container, and the top margin for the input[type=text] is shoving it way down.

Making the width on the form a little wider seems to do the trick in IE8.

If you are going to support IE6, keep in mind the broken box model, and don’t specify both padding and margin on the same element.