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;