How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

Question

I am having problems styling form fields with CSS. As you 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> 

Answer 1

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.

Answer 2

you should try floating them both left, that way they will position themselves.