Portable HTML / CSS for vertical alignment of type = image input with type = text input?

Question

I am trying to make a form with a horizontal layout:

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

The problem is that the first input, the text field, works well with the text "Enter foo:", but the other two inputs are very poorly aligned with the text field; they are about 7 pixels too high. The margins and indents for all of these elements are set to 0.

If I add align = "middle" to the image inputs, they move 12 pixels down, so they are 5 pixels too low, which scares my mind. More vaguely, the CSS vertical-align property does not affect input elements (they ignore it), so it's hard for me to imagine how to fix this in CSS.

Does anyone know of a browser-portable way to create a form with an inscription, an input text box, and two submissions of images with a horizontal layout and sequential vertical alignment? If not, I would agree to something that works in Firefox :) (95% of my users).

Answer 1

Adding this:

 style='vertical-align: bottom' 

for elements, <input type="image"> looks good to me in Firefox and IE.

This makes the bottom edge of the images a line with the bottom edge of the input field.

(By default, they are too high, since the lower edge of the embedded image coincides with the base line of the text - the gap at the bottom is the placement of text detectors: q, p, g, etc.)

I’m not sure what makes you say: “CSS vertical alignment property does not affect input elements”, but it works for me - there may have been another problem preventing you from working with you.