CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 12422

Problems with CSS and styling input tags for a search bar

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:

alt text http://img196.imageshack.us/img196/40/exampleq.png

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

alt text http://img402.imageshack.us/img402/7587/submit.png

alt text http://img138.imageshack.us/img138/6936/searchbarg.png

Complete code:

HTML - http://pastebin.com/m53c47215

CSS - http://pastebin.com/m698b11f8

Upvotes: 1

Views: 598

Answers (4)

Johannes Gorset
Johannes Gorset

Reputation: 8785

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.

Upvotes: 1

Joel
Joel

Reputation: 19358

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

Upvotes: 0

Julien
Julien

Reputation: 9432

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

Upvotes: 0

Travis
Travis

Reputation: 4078

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

Upvotes: 1

Related Questions