Problems with CSS and styling input tags for a search bar

Question

Here's the CSS code I'm working with:

    #navigation input#search_bar {
        background: url(images/searchbar.png) no-repeat;
        border: none;
        height: 20px;
        width: 156px;
        margin: 0;
        }

    #navigation input#submit {
        background: url(images/submit.png) no-repeat;
        width: 30px;
        height: 20px;
        margin-left: -30px;
        border: none;
        }

HTML:

<div id="navigation">
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">about us</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact us</a></li>
    </ul>

        <input id="search_bar" type="text" name="search_bar" />
        <input id="submit" type="submit" name="search_submit" value="" />
</div>

The submit button is never inline with the search bar, but either above or below it by a small or large amount depending on the browser.

Example:

Here's the two images I'm working with:

Complete code:

HTML - http://pastebin.com/m53c47215

CSS - http://pastebin.com/m698b11f8

Answer 1

This looks like a vertical-align problem. Try adding display:inline-block; to both the search field and the submit button.

Answer 2

You'll probably have more success with the position attribute than margin-left. As its name suggests, it is the preferred method of positioning elements in CSS. In fact, using anything else is generally frowned upon due to browser inconsistency.

You'll need to wrap the two input elements in another element to position the submit button in this way. I suggest the form tag for its added bonus of making your HTML valid.

form {
   position: relative;
   }

form input#submit {
   position: absolute;
   right: 0px;
   top: 0px;
   }

Needless to say (but I do anyway), you may tweak the pixel values to your liking.

Answer 3

Perhaps Travis is right, if not, you can also try to put your margin/padding values to 0. And instead of a negative margin, use a

position: relative;
left:-30px

And of course you can use this awesome frameworks that made my life easier and more relax about cross-browser css

Answer 4

Add vertical-align:middle; (or any other value) to both inputs:

#navigation input#search_bar {
    background: url(images/searchbar.png) no-repeat;
    border: none;
    height: 20px;
    width: 156px;
    margin: 0;
    vertical-align:middle;
    }

#navigation input#submit {
    background: url(images/submit.png) no-repeat;
    width: 30px;
    height: 20px;
    margin-left: -30px;
    border: none;
    vertical-align:middle;
    }

http://jsbin.com/obumo/2/edit