Textbox flush with buttons - html

Question

I'm trying to create an input box with two buttons on the left and right. Here's the frankenstein monster I have so far: http://vegan.fm/clone/?p=8679
It should look like the textbox+button here: http://appsumo.com/welcome/?next=/
I've been able to get it to align sort of well, but then it seems to just get jumbled on a different OS or computer.
I've done this by obsessively tweaking the padding and margin values, but my gut tells me there's a better practice. So far, I haven't found anything with a google/stackoverflow search. Any help is appreciated. Thank you.
Update: The problem I'm having is the "height" value for the button and the input box are exactly the same, yet the button is always higher than the input box.
Here's some code:
.halfbutton {
border-top: 1px solid #f0d995;
background: #806a43;
padding: 0px 3px 0px 3px;
background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43));
background: -moz-linear-gradient(top, #d1ad51, #806a43);
height: 30px;
width:25px;
-webkit-border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
And for the input box:
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... />
</form>

Answer 1

Dunno have i understood the question right.
To make it seems like in your link you need to use background img in your input form;
You may make it look like inset input form with css3
in css
#inputform{
background-color: #f7f7f7;
-moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
-webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1);
...
}
There's a link in the comments with your code from website;

Answer 2

At the moment, the alignment seems ok to me (in Chrome) but there's no border on the input so it's hard to tell what's going on.
My comment though - right now you have the add'l search options as a dropdown to the left of the input field, then the "more" dropdown with add'l choices attached to the right of the input. I'd argue this doesn't follow the typical user's model of search boxes where immediately to the right of the input is the submit/options button. Maybe move the options button to the right, then float the "more" as a separate button to the right of that (or below).
Just a thought.