Search code examples
htmlcssvertical-alignmentimagebuttonsearch-box

Getting custom submit button (image button) to line up with text input?

See how the button does not line up I am attempting to implement a custom search button by using an image button. In the image above, you can see the problem I am running into. I have searched many threads about this topic but cannot get mine fixed. Below is the css code contain both the text input (search input) and the image button (green image button). Any and all help is appreciated.

CSS:

#search{
    position: absolute;
    right: 350px;
    top: 10px;
    vertical-align: middle;
}

Html:

<div id='search'>
    <form action='searchquestions.php' method='post' >
    <input type='text' name='searchValue' placeholder='search'>
    <input type='image' src='searchbtn.png' alt='Submit' name='searchSubmit' height='20' width='20'>
    </form>
</div>
Solution

  • check this fiddle and see is this what you need

    http://jsfiddle.net/94X8S/1/

    #search input[type="image"]{
    position:relative;
    top:5px;
}