[Résolu] Bouton submit plus haut que le champ

Bonsoir,

J'ai encore un problème avec le design que je réalise: http://bricosign.free.fr/xeki/

Pour une fois ce n'est pas IE qui est en cause mais FF. Le problème se situe au niveau de la recherche, le bouton OK est plus haut que le champ de gauche.

La partie XHTML concernée:

      <form action="" method="post">
       <fieldset>
        <label for="recherche">
         <input type="text" size="18" name="recherche" value="" id="recherche" />
        </label>
        <input type="submit" value="OK" id="ok_recherche">

       </fieldset>
      </form>

La partie CSS concernée:

#recherche {
        margin-left: 16px;
        margin-top: 0px;
        margin-bottom: 8px;
        width: 99px;
        height: 18px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
}
#ok_recherche {
        margin-left: 4px;
        margin-top: 4px;
        margin-bottom: 8px;
        width: 26px;
        height: 20px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
}

Merci pour votre aide,

Rémi
Modifié par *|~ XiKuXan ~|* (23 Apr 2006 - 23:40)

bonjour,

sans modifier le code mais en alignant ces 2 elements cote àcote en vertical align:bottom;
tu obtiens un rendu acceptable.

#recherche {
        margin-left: 16px;
        margin-top: 0px;
        margin-bottom: 8px;
        width: 99px;
        height: 18px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
	vertical-align:bottom;
}

#ok_recherche {
        margin-left: 4px;
        margin-top: 4px;
        margin-bottom: 8px;
        width: 26px;
        height: 20px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
	vertical-align:bottom;
}

++
Modifié par gcyrillus (23 Apr 2006 - 22:50)

Merci, ta solution marche bien pour ff. Mais je l'ai mise dans un

html>body #recherche, html>body #ok_recherche {
...
}

parceque sinon le décalage est présent sur IE.

#recherche {

        margin-left: 16px;
        margin-top: 4px;
        margin-bottom: 8px;
        width: 95px;
        height: 15px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
}
#ok_recherche {
        margin-left: 4px;
        margin-top: 4px;
        margin-bottom: 8px;
        font-size: 0.8em;
        width: 26px;
        height: 17px;
        color: #AEAEAE;
        border: 1px solid #AEAEAE;
        background: #3E3E3E;
}
html>body #recherche, html>body #ok_recherche {
	vertical-align: bottom;
}

Bonne soirée,

Rémi