Question

I am trying to build a login form but the textfields and the submit button do not align properly. Currently my page shows the submit button a few pixels below the text fields.

It should look like this.
[TEXT FIELD] [TEXT FIELD] [BUTTON]

Can anyone help me with this problem, I am new to css…

HTML:

 <form name='loginform' id='loginform' action='logincheck.php' method='post' >
 <input type='text' name='user_login' id='user_login' class='login-header' value='Username'>
 <input type='password' name='user_pass' id='user_pass' class='login-header'  value='password'><label style='color:#ffffff;'>
 <input type='submit' name='login' id='login' value='Log In' tabindex='100' class='login-button' >
 </form>

CSS:

.login-header {
border : 1px solid Black;
background-color : #CCCCCC;
color : #0E1930;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
height: 2em; 
}
.login-button {
border : 1px solid Black;
background-color : #CCCCCC;
color : #0E1930;
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
padding:4px 10px; 
}

Answer 1

This ended up being tougher than I thought. I managed to get IE and firefox looking the same after a couple css changes and additions. First you are using both em and px for the sizes of your inputs. I switched out the height: 2em; style to be padding: 4px 0; instead. The hardest part was figuring out why firefox was having a larger inner padding for its submit input than the text inputs. I resolved this by adding the following:

input::-moz-focus-inner
{
    border: 0;
    padding: 0;
}

They now look the same. I set up an example here: http://jsfiddle.net/GhFvB/