How do I align input field and submit button (also differences between: IE, FFox, Chrome)?
I am having problems styling form fields with CSS. As y开发者_如何学Goou can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!
I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...
What am I doing wrong?
IE7 (xp)
FFox (linux) Chrome (linux) CSS (nothing for subscribe_form):#form_box {
position: relative;
height: 35px;
top: 7px;
left: 20px;
}
#subscribe_email {
border: solid 1px #CCC;
height: 24px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
}
#subscribe_submit {
position: relative;
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
HTML:
<div id="box2" class="tbox">
<div id="form_box">
<form id="subscribe_form" action="subscribe" method="post">
Sign Up:
<input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
<input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
</form>
</div>
</div>
Here is what works for me in FF, IE8 and Chrome on XP
#subscribe_email {
border: solid 1px #CCC;
height: 21px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
vertical-align: bottom
}
#subscribe_submit {
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.
you should try floating them both left, that way they will position themselves.
before aplying any css make all margin and padding zero by default all browser as thr own margin and padding by making it zero and then applying ur style it affects eventually
精彩评论