HTML/CSS portable pour aligner verticalement une entrée de type = image avec une entrée de type = texte?

Question

Je tente de faire une forme comme si, avec la mise en page horizontale:

<form id="foo" name="foo" method="post" action="fooaction"> 
    <p>Enter a foo: 
     <input type="text" id="fooText" name="fooText"value=""/> 
     <input type="image" name="yes" id="fooSubmitYes" value="1" src="yes.png" title="Yes" width="24" height="24"/> 
    <input type="image" name="no" id="fooSubmitNo" value="0" src="no.png" title="No" width="24" height="24"/> 
    </p> 
</form> 

La question que j'ai est que la première entrée, la zone de texte, aligne bien avec le texte « Entrez un foo: », mais les deux autres entrées s'alignent très mal avec la zone de texte; ils sont environ 7 pixels trop haut. Si j'ajoute align = "middle" aux entrées de l'image, elles se déplacent de 12 pixels vers le bas, donc elles sont 5 pixels trop bas, ce qui me dépasse. Plus confusément, la propriété CSS vertical-alignment n'affecte pas les éléments d'entrée (ils l'ignorent), donc j'ai du mal à imaginer comment résoudre ce problème en CSS.

Est-ce que quelqu'un connaît une façon portable de faire un formulaire avec une légende, une zone de saisie et deux images de présentation horizontale avec un alignement vertical cohérent? Sinon, je me contenterais de quelque chose qui fonctionne dans Firefox :) (95% de mes utilisateurs).

Answer 1

Ajouter ceci:

style='vertical-align: bottom' 

aux <input type="image"> éléments me semble bon dans Firefox et IE.

Cela permet d'aligner le bord inférieur des images avec le bord inférieur de la zone de saisie.

(La raison pour laquelle ils sont "trop ​​élevés" par défaut est que le bord inférieur d'une image en ligne s'aligne avec la ligne de base du texte - l'espace inférieur est pour accueillir les décodeurs de texte: q, p, g, etc. Je ne suis pas sûr de ce qui vous fait dire "la propriété d'alignement vertical CSS n'affecte pas les éléments d'entrée" mais cela fonctionne pour moi - peut-être y avait-il un autre problème empêchant cela de travailler pour vous.