form element styling

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

form element styling

Post 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>
Image
choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post 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" />
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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.
choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post 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.
Post Reply