Horizontal Form

Addendum 8/20/2015: I am commenting out http://a.yfrog.com/img741/9635/wcn9.jpg which yfrog has seen fit to replace with some sort of iTunes advertisement. I wish I had not started up my blog hosting images with these clowns.

Have you ever tried to make a form like this one but have struggled to make the button and the field the same height across all browsers? Here is my hack.

 

<div style="float:right; white-space: nowrap; height: 23px; background-color: #6D6D6D; margin: 0px 0px 10px 10px; padding: 0px 3px 0px 3px;">

<input type="submit" value="Filter" style="cursor: pointer; line-height: 19px; background-color: #6D6D6D; height: 19px; border: none; box-shadow: none; color: #FFFFFF; *margin-left: -10px;">

</div>

 

<div style="float:right; height: 21px; width: 226px; background-image:url('@Url.Content("~/Content/Images/searchbubble.gif")'); margin: 0px 0px 10px 10px; padding: 2px 12px 0px 12px;">

<input type="text" value="Foo" style="box-shadow: none; border: none; padding: 0; margin: 0; height: 19px; width: 226px; line-height: 19px; background-color: #FFFFFF; *margin:-1px 0px 0px -10px;">

</div>

 

<div style="float:right; white-space: nowrap; height: 23px; background-color: #F7F7F7; margin: 0px 0px 10px 10px; padding: 0px 3px 0px 3px;">

<input type="submit" value="Search by Name:" style="width: 110px; line-height: 19px; background-color: #F7F7F7; height: 19px; border: none; box-shadow: none; *margin-left: -10px;">

</div>

 

The copy proceeding the form is a submit also so that the bottom of the text in it lines up with the bottom of the text in the "real" submit. That said, I couldn't get the copy in the field to consistently line up with the submits. In order to do so I'd probably have to have three fields and put some .click() jQuery on the field serving as a button. I've spent too much time on this as it is. :P

p.s. float: right; isn't so great either as it will screw up the tabbing