Search box using images

HTML & CSS
1

Hi Guys,

I am trying to use some css and images to make a search box, its not alighing correcetly

this is what i see in IE7

and this is Firefox 3.5

here is my html

<!-- Search Box -->
<div id="search"><form action="http://www.google.com/search" method="get">
  <input type="Text" name="q" id="box">
  <button  type="submit" id="btn">Search</button>
  <!-- <div><button style="display:block" id="btn" type="submit">Search</button></div> -->
</form>
</div>

here is the css

/* SEARCH */
#search {
	float: right;
	margin-right: 6px;
}

#box {
	width: 174px;
	height:27px;
	background: #e3ab72;
	border-left: #fff 1px solid;
	border-top: #fff 1px solid;
	border-bottom: #fff 1px solid;
}
	

#btn {
  width:29px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url(images/search_btn.jpg) no-repeat center top;
  text-indent: -1000em;
}

cant seem to figure it out :injured:

2

Float the input element to the left:
#box {
width: 174px;
height:27px;
background: #e3ab72;
border-left: #fff 1px solid;
border-top: #fff 1px solid;
border-bottom: #fff 1px solid;
float:left;
}

3

that worked…thanks again :smiley: