Page 1 of 1
form element styling
Posted: Tue Oct 17, 2006 12:31 pm
by Luke
How come when you have an image lined up next to a form element, they don't line up correctly? At first I thought it was the form tag's margins but setting those to zero did nothing... as did setting the element's margins to zero.
Code: Select all
<tr><td align="left">
Quantity:
<input name="Quantity" class="text" value="1" size="4" type="text">
<img alt="Add To Cart" src="images/buttons/add_to_cart.gif" border="0">
</td></tr>

Posted: Tue Oct 17, 2006 1:06 pm
by choppsta
The vertical-align property is by default set to "baseline".
By changing this to "text-bottom" will get the effect you're after.
Code: Select all
<img src="images/buttons/add_to_cart.gif" style="border: 0; vertical-align: text-bottom;" alt="Add To Cart" />
Posted: Tue Oct 17, 2006 1:10 pm
by Luke
I've always wondered what vertical-align did... so far not a single element I've tried to apply it to has been effected by it.
Posted: Tue Oct 17, 2006 1:39 pm
by RobertGonzalez
Neat little 'vertical-align' tut... however...
I don't use vertical-align at all because it seems it is handled differently in different user agents. I like setting top and bottom padding in conjunction with a line-height attribute to try to 'force' things into the middle.
W3 manual on CSS for line-height.
Posted: Tue Oct 17, 2006 1:46 pm
by Oren
If you want something aligned to the middle, specify the line height to be the same as the height of the box itself.
Posted: Wed Oct 18, 2006 3:12 am
by choppsta
The Ninja Space Goat wrote:I've always wondered what vertical-align did... so far not a single element I've tried to apply it to has been effected by it.
Yes, I think a lot of confusion comes from people expecting it to work like valign="top" in a table cell. But it's only for inline elements, not block level elements.