Help! can't align text inside form

liunx

Guest
Hi,
I'm a newbie here and need some serious help! I just started working on adding a form that includes Qty: with text input for the amount and a cart icon to my site (for e-commerce) and I can't figure out for the life of me why i can't align the text (Qty.) to the top of the cell/form. (see screen shot of problem below!)



Here's my code:

<td align="left" valign="top" nowrap>
<form style="margin-bottom:0;" method=post action="https://www.mycartblahblah">
<input type=hidden name="PartNo" value="001">
<font face="verdana" size="1">Qty:</font><input type=text name="Qty" value="1" size="1" align="top">
<input name="Submit" type="image" src=http://www.webdeveloper.com/forum/archive/index.php/"cart.gif" border="0" align="top" alt="add to cart" width="21" height="19">
</form>
</td>

The word Qty: is aligning in the center of the cell which looks awful with the rest of my table cells content which is left and top aligned. Any help would be appreciated. Thank you! Jill <!-- m --><a class="postlink" href="http://www.autoperformancewarehouse.com/images/ScreenHunter_007.jpgSince">http://www.autoperformancewarehouse.com ... 7.jpgSince</a><!-- m --> you correctly posted the question to CSS forum, maybe you should start using CSS and leave prehistoric <font> behind.Thanks - I totally agree, but i need some help! Any suggestions on re-working the code with only css style and aligning text to top?Start out with the right markup.
<div>
<label for="Qty">Qty: </label>
<input type=text name="Qty" id="Qty" value="1" size="1">
</div>
Then style it up from there.Hi,
thanks for the good start, although i've never used the <label> tag before. What does it mean and what does it do? what is the best way to add CSS now so that I can align my QTY text to the top of the cell? Thanks again - Jill<label for="Qty" style="vertical-align:top;">Since your example is so simple Fang's inline style will work fine. I prefer putting everything I can in a style sheet and keep the body mark up as simple as possible so up in the head of the page I'd have

<style type="text/css">
label { vertical-align: top; }
</style>
 
Back
Top