On 2006-10-10, maya <ma********@yahoo.comwrote:
hi,
I can't get all elements inside a <tdto valign to middle (default)
when include an input type-text.. pls see example here..
http://www.mayacove.com/css/table.html
(there is a slight difference depending on whether input field is done
with css or not, but essentially problem remains the same for both cases..)
what is problem please... you can see that both text input and imgs
line up perfectly well when they're on their own...;) (as shown in
bottom two examples..) why can't they line up ok when all together (I
left img-borders on so can better see what I mean..)
You've got a single table cell containing three inline elements, which
are baseline-aligned with each other. The whole lot is middle-aligned
within the table cell.
If you add a bit of text in your source before the <input>, and then
also type something into the input on the displayed page, you will see
how the inline boxes are baseline-aligned.
It looks bad because the inputs have a certain amount of space in them
below the baseline. But that's desirable or you wouldn't see the
descenders on glyphs like g-- in other words letters than hang below the
baseline would be clipped.
But if the bottom edge of the inputs were aligned with the baseline, any
text in them would be out-of-line with the buttons. This would be
incorrect, and would look equally bad.
So that's why they don't line up. There is a good reason.
One approach might be to put SEARCH, the input and GO in separate table
cells, and set vertical-align: bottom on the cells. Then they will be
aligned at the bottom (but text in the inputs will of course be above
the row baseline).
