Question

Is there a way so that the search bar and go button are completely touching? I am trying to create something whereby the search bar and go button are kind of one.

Here is my code:

/*SEARCH*/
form#searchform input{background-color:rgba(128, 129, 132, 0.4);   margin-bottom: 10px; border:medium none;   font-size:12px;  padding:10px;  width:173px;}

form#searchform input#s{
width: 150px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;
border-bottom: 1px #868686 solid;  
padding:10px;
}

form#searchform input#btn
{width: 23px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color:#00ADEE;}

<!--  START SEARCH  -->

          <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
          <div>
            <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s"  /> 
          <input name="go" type="submit" value=">" id="btn"  /> 
          </div>
          </form>

    <!--  END SEARCH  -->

At the moment there is a small gap between the two and I cannot figure out why. I also want to pad the border-bottom on the search box and the padding for the #s class is not working either. Any help is appreciated!

Answer 1

Your problem is that you have whitespace between your text field and your button, the following fixes the issue.

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <div>
    <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s"  /><input name="go" type="submit" value=">" id="btn"  />
  </div>
</form>

Edit: Like this http://jsfiddle.net/N2PVu/

Edit 2: OR form#searchform input#s, form#searchform input#btn{float:left;}