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.

友情链接