css - When using form-search and input-append to create a search form, the search button show up short

Question

Here's the fiddle and code below:

<form class="form-search">
    <div class="input-append">
        <input type="text" id="search-query" class="search-query" />
        <input type="button" id="search-submit" value="Find" class="btn" />
    </div>
</form>

The button shows up fine in IE or Chrome, but when viewed with FF (ver 15 at least), the button show up a little short. Am I not using the Bootstrap correctly?

Answer 1

From the doc, you should use button where you are using input:

<form class="form-search">
    <div class="input-append">
        <input type="text" id="search-query" class="search-query" />
        <button type="button" id="search-submit" class="btn" >Find</button>
    </div>
</form>

http://jsfiddle.net/tk8Dc/7/

Answer 2

Add height: auto; on the input textarea

Another good trait (just another tip)to use on input is:

box-sizing: border-box;
-webkitbox-sizing: border-box;
-moz-box-sizing: border-box;