Alineación vertical del botón Enviar mediante CSS HTML

Question

Tengo problemas para mostrar mi botón de envío en línea con mis entradas en Internet Explorer. La alineación está bien en Safari y Firefox, pero IE baja el botón aproximadamente 5 px. ¿Alguna idea de por qué está sucediendo esto o cómo puedo solucionarlo?

La url es http://www.menslifestyles.com clic suscribirse en la parte superior de la página del formulario aparecerá en. Las dos entradas de línea con la espalda recta, sino en decir el botón de envío no se alinea!

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; 
} 

Answer 1

Debe establecer el relleno y margen explícitamente, algunos navegadores tienen diferentes valores predeterminados que desordenarán las cosas. Entonces margin-left: 5px; se convierte en margen: 0 0 0 3px;

En general, los formularios también son inconsistentes. Puede intentar posicionar el botón de enviar, en cuyo caso otorgue la posición de #subscribe: relativa, y la posición del botón de envío: absoluta; Derecha: 0px; arriba: 0px;

En el futuro se puede obtener en torno a valores por defecto del navegador, y conseguir un aspecto más coherente mediante el establecimiento de valores por defecto en su hoja de estilo, consulte here de una hoja de estilo de reinicio que se pueden incluir. (Si se incluye este momento podría tirar algunas cosas)

Answer 2

En el CSS para #subscribe input[type="button"], #subscribe input[type="submit"] intenta agregar vertical-align: top;

Answer 3

En esta regla css

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

Cambio

position:relative

a

position:absolute

Debería hacer el truco. Probado en IE 8 y funciona.

Answer 4

El botón Enviar parece tener diferentes valores de margen y relleno predeterminados en diferentes navegadores.

Supongo que esto debe estar en algunos reset Stylesheet ya que esta no es la única discrepancia de valores "predeterminada" del navegador cruzado molesto. ¿Cuándo se estandarizará la web? Este es otro tema.

Esto es cómo lo hacemos:

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

noté muy pequeñas discrepancias entre IE8, Firefox y Gchrome pero puede haber en otros navegadores.

El formulario aquí tiene su posición establecida en "relativa" de modo que cuando establezco la posición del botón en absoluta, el botón se posiciona en relación con el formulario de búsqueda.