Alignement vertical du bouton de soumission à l'aide du code HTML HTML

Question

Je n'arrive pas à afficher mon bouton de soumission en fonction de mes entrées dans Internet Explorer. L'alignement est très bien dans Safari et Firefox, mais IE baisse le bouton d'environ 5px. Des idées pour lesquelles cela se passe ou comment je peux y remédier?

L'URL est http://www.menslifestyles.com cliquez subscribe en haut de la page du formulaire pop. Les deux entrées alignent droit mais à savoir le bouton d'envoi ne correspond pas!

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

Vous devez définir le remplissage et la marge explicitement, certains navigateurs ont des paramètres par défaut différents qui vont gâcher les choses. Donc marge gauche: 5px; devient marge: 0 0 0 3px; Les formulaires sont également incohérents en général, vous pouvez essayer de positionner absolument le bouton de soumission, auquel cas donner la position #subscribe: relative, et la position du bouton submit: absolute; droite: 0px; en haut: 0px; À l'avenir, vous pouvez contourner les valeurs par défaut du navigateur et obtenir un aspect plus cohérent en définissant des valeurs par défaut dans votre feuille de style. Pour obtenir une feuille de style à réinitialiser, reportez-vous à here. (Si vous incluez cela maintenant il pourrait jeter quelques choses)

Answer 2

Dans votre css pour #subscribe input[type="button"], #subscribe input[type="submit"] essayer d'ajouter vertical-align: top;

Answer 3

Dans cette règle css

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

changement

position:relative

à

position:absolute

Doit faire l'affaire. Testé dans IE 8 et fonctionne.

Answer 4

Le bouton Envoyer semble avoir des valeurs de marge et de remplissage par défaut différentes dans différents navigateurs.

Je suppose que cela doit être dans certains reset Stylesheet car ce n'est pas la seule divergence des valeurs "par défaut" de l'explorateur croisé. Quand est-ce que le web va standardiser c'est un autre sujet.

Voici comment nous le faisons:

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

J'ai remarqué des écarts très faibles entre IE8, Firefox et gChrome, mais il peut y avoir dans d'autres navigateurs.

La position ici a sa position "relative" de sorte que lorsque je mets la position du bouton en absolu, le bouton se positionne lui-même par rapport au formulaire de recherche.