Vertical alignment of submit button using CSS HTML

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">&nbsp;    &nbsp;
<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;
}
+5
source share
4 answers

css #subscribe input[type="button"], #subscribe input[type="submit"] vertical-align: top;

+8

, , . , margin-left: 5px; margin: 0 0 0 3px;

, , #subscribe position: relative position button position: absolute; : 0px; : 0px;

, , . a reset , . ( , )

+1

css

#subscribe input[type="button"], #subscribe input[type="submit"]

position:relative

to

position:absolute

. IE 8 .

+1

"", , .

, - reset , " ". , .

:

#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>

IE8, Firefox GChrome, .

, "", , , searchForm.

+1

All Articles