Portable HTML/CSS for vertically aligning an input of type=image with an input of type=text?

Question

I'm attempting to make a form like so, with 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 issue I have is that the first input, the text box, aligns well with the text "Enter a foo:", but the other two inputs align very poorly with the text box; they are about 7 pixels too high. Margins and padding on all these elements are set to 0.

If I add align="middle" to the image inputs, then they move 12 pixels down, so they are 5 pixels too low, which boggles my mind. More confusingly, the CSS vertical-align property doesn't affect input elements (they ignore it), so I have a hard time imagining how to fix this in CSS.

Does anyone know a browser-portable way to make a form with a caption, input text box, and two submit images with horizontal layout and consistent vertical alignment? If not, I'd settle for something that works in Firefox :) (95% of my users).

Answer 1

Adding this:

style='vertical-align: bottom'

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

That makes the bottom edge of the images line up with the bottom edge of the input box.

(The reason they're "too high" by default is that the bottom edge of an inline image aligns with the baseline of the text - the gap beneath is to accommodate the text decenders: q, p, g, etc.)

I'm not sure what makes you say "the CSS vertical-align property doesn't affect input elements" but it works for me - perhaps there was some other problem preventing that from working for you.