Trying to construct an input box with two buttons positioned on the left and right. Presenting the current iteration of my project:
The desired appearance should resemble the textbox and button layout found here:
Although I've managed to achieve a somewhat aligned look, it unfortunately becomes disorganized when viewed on another operating system or computer.
My approach has involved constant adjustment of padding and margin values, but I sense there may be a more effective method. However, my attempts at finding one through Google and Stack Overflow have been unsuccessful so far. Any guidance would be greatly appreciated. Thank you.
Update: A persistent issue I'm facing is that despite setting the "height" value identically for both the button and the input box, the button consistently appears taller than the input box.
Shown below is a snippet of 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>