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;
widt开发者_JAVA技巧h: 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
This looks like a vertical-align problem. Try adding display:inline-block; to both the search field and the submit button.
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.
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
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
精彩评论