I'm having trouble displaying my submit button according to my data in Internet Explorer. Alignment in safari and firefox is great, but IE drops the button by about 5 pixels. Any ideas why this is happening or how I can fix it?
URL http://www.menslifestyles.com
click the subscribe button at the top of the page where the form will appear. Two inputs are located directly, but in that the submit button does not 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"><a href="#" id="closelink">X</a>
</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;
}
source
share