Vertical alignment of submit button using CSS HTML - css

Question

I am having trouble getting my submit button to display in line with my inputs in internet explorer. The alignment is fine in safari and firefox but IE is dropping the button down about 5px. Any ideas why this is happening or how i can fix it?
The url is http://www.menslifestyles.com
click subscribe at the top of the page the form will pop in.
The two inputs line up straight but in ie the submit button doesn't align!
-------html-------
<div id="subscribe">
<form id="subscribeform" method="post" action="/maillists/subscribe" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST"></div>
<label for="MaillistName">Name</label><input name="data[Maillist][name]" type="text" maxlength="255" id="MaillistName">
<label for="MaillistEmail">Email</label><input name="data[Maillist][email]" type="text" maxlength="500" id="MaillistEmail">
<input type="submit" value="Submit">X
</form></div>
-----css-------
#subscribe{
width:620px;
position:absolute;
top:25px;
left:50%;
margin-left:-120px;
overflow: auto;
z-index: 1000;
background: #ffffff;
color:#6e6e6e;
font-size: 10px;
text-transform: uppercase;
font-family: Helvetica, Verdana;
}
#subscribe input{
border: 1px solid #e5e5e5;
display: inline;
height: 12px;
color:#cccccc;
width: 215px;
}
#subscribe input[type="button"], #subscribe input[type="submit"]{
clear:both;
padding:3px, 0px;
-webkit-appearance: none;
font-family: Helvetica, Verdana;
background-color:#cccccc;
text-align:center;
color: #3c3c3c;
font-size:10px;
text-transform: uppercase;
border: none;
cursor: pointer;
display: inline;
height:15px;
width:60px;
position:relative;
margin-left:5px;
}
#subscribe form{
margin:0px;
padding:0px;
}
#subscribe label{
display: inline;
font-size: 10px;
}
#subscribe a{
text-decoration: none;
color: #cccccc;
}
#subscribe #closelink{
padding:0 5px;
}

Answer 1

In your css for #subscribe input[type="button"], #subscribe input[type="submit"] try to add vertical-align: top;

Answer 2

You should set padding and margin explicitly, some browsers have different defaults which will mess things up. So margin-left:5px; becomes margin: 0 0 0 3px;
Forms are also just inconsistent generally, you may want to try and absolutely positioning the submit button, in which case give #subscribe position:relative, and the submit button position:absolute; right:0px; top:0px;
In the future you can get around default browser values, and get a more consistent look by setting default values in your stylesheet , see here for a reset stylesheet that you can include. (If you include this now it might throw a few things out)

Answer 3

In this css rule
#subscribe input[type="button"], #subscribe input[type="submit"]
Change
position:relative
to
position:absolute
Should do the trick. Tested in IE 8 and works.

Answer 4

Submit button seem to have different default margin and padding values in different browsers.
I assume this must be in some reset Stylesheet as this is not the only annoying cross browser "default" values discrepancy. When is the web going to standardize this is another subject.
This is how we do it:
#searchForm {
position: relative; // you must keep this
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 30px;
}
input#searchBtn{
padding: 0; // you must keep this
margin: 0; // you must keep this
position: absolute; // you must keep this
left: 203px; // you can change this
top: 2px;
height: 24px;
width: 42px; // you can change this
font-size: 14px;
background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
}
<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
<input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>
I noticed very small discrepancies between IE8, Firefox and GChrome but there may be in other browsers.
The form here has its position set to "relative" so that when I set the button's position to absolute, the button position itself relatively to the searchForm.