Special search form

Question

I try to make special search form, with my own design, I want to make text input and btn is connected in one, I try all possible solution but always is speace between text input and btn,

here is code:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<table border="0">
<tr>
<td><input class="search-box" type="text" value="" name="s" id="s" /></td>
<td><input type="submit" id="searchsubmit" value="Search" /></td>
</tr>
</table>
</form>

and css:

#searchsubmit {
background: #000000;
}
.search-box {
border: 1px solid #000000;
}       

where is my error ?

Thanks.

Answer 1

#searchsubmit { margin-left:-3px }

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
  <input class="search-box" type="text" value="" name="s" id="s" />
  <input type="submit" id="searchsubmit" value="Search" />
</form>

but does not look right in iOS since the button is rounded

http://jsfiddle.net/mplungjan/NnXcm/

Answer 2

depends on the browser. try this in your css to normalize the table (works for many browers like for example IE):

 table{
    border-collapse: collapse;
    border-spacing: 0;
}