vertical align - form in a cell

J

John Smith

I have a form in a cell. The form appears vertically on the top of
the cell. I have been trying to move it down so it'd align with
the text in the next cell. No matter what I did, it doesn't budge.
I tried valign="bottom", I tried style="vertical-align:bottom;"
and even the combination of both, I tried enclose the cell with
<div valign="bottom">...</div>, they don't work. This is true in
both IE and FF.

Any suggestions? Thanks.

====================================
<tr valign="bottom" style="vertical-align:bottom;"><td
align="right" valign="top">state:</td><td valign="bottom"
style="vertical-align:bottom;">
<form action="./" method="GET"
style="font-family:arial;font-size:10pt;vertical-align:bottom;">

<select name="state" style="font-size:12pt;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
................
 
J

Jukka K. Korpela

John said:
I have a form in a cell.
URL?

The form appears vertically on the top of
the cell. I have been trying to move it down so it'd align with
the text in the next cell. No matter what I did, it doesn't budge.
Click to expand...

How about posting the URL?

Your code snippet, when turned to a minimal valid HTML document, causes the
form to appear at the bottom of the cell. So quite apparently the problem is
elsewhere. Not that the snippet wouldn't have its share of problems, like
clumsy and error-prone use of embedded styles, as well as the apparent use
of a dropdown with about 50 entries.
Any suggestions? Thanks.
Click to expand...

Post the URL. You're welcome.
 
J

John Smith

Jukka said:
How about posting the URL?

Your code snippet, when turned to a minimal valid HTML document, causes
the form to appear at the bottom of the cell. So quite apparently the
problem is elsewhere. Not that the snippet wouldn't have its share of
problems, like clumsy and error-prone use of embedded styles, as well as
the apparent use of a dropdown with about 50 entries.


Post the URL. You're welcome.
Click to expand...

Thanks for the prompt reply. Here is the barebone page, just a
table with 9 cells. In FF and IE the dropdown box is always on the
top of the cell.

================================================\
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
</head>
<body>

<table width="400" cellpadding="2" cellspacing="2" border="1"
style="font-family:georgia;font-size:14pt">
<tr><td align="right">zip code:</td><td><input type="text"
name="myZipcode" size="12" style="font-family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td><td>&nbsp;</td></tr>
<tr><td align="right">city:</a></td><td><input type="text"
name="myCity" size="12" style="font-family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td><td>&nbsp;</td></tr>
<tr valign="bottom" style="vertical-align:bottom;"><td
align="right" valign="top">state:</td><td valign="bottom"
style="vertical-align:bottom;"><div valign="bottom"
style="vertical-align:bottom;">
<form action="./" method="GET" valign="bottom"
style="font-family:arial;font-size:10pt;vertical-align:bottom;">

<select name="state" valign="bottom" style="font-size:12pt;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</form></div></td><td>&nbsp;</td></tr>

</table>
</body>
</html>
 
P

Peter

Thanks for the prompt reply. Here is the barebone page, just a
table with 9 cells. In FF and IE the dropdown box is always on the
top of the cell.

================================================\
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
</head>
<body>

<table width="400" cellpadding="2" cellspacing="2" border="1"
style="font-family:georgia;font-size:14pt">
<tr><td align="right">zip code:</td><td><input type="text"
name="myZipcode" size="12" style="font-family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td><td>&nbsp;</td></tr>
<tr><td align="right">city:</a></td><td><input type="text"
name="myCity" size="12" style="font-family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td><td>&nbsp;</td></tr>
<tr valign="bottom" style="vertical-align:bottom;"><td
align="right" valign="top">state:</td><td valign="bottom"
style="vertical-align:bottom;"><div valign="bottom"
style="vertical-align:bottom;">
<form action="./" method="GET" valign="bottom"
style="font-family:arial;font-size:10pt;vertical-align:bottom;">

<select name="state" valign="bottom" style="font-size:12pt;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</form></div></td><td>&nbsp;</td></tr>

</table>
</body>
</html>
Click to expand...

Try this:

<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8"/>
</head>
<body>
<form action="./" method="GET" valign="bottom"
style="font-family:arial;font-size:10pt;vertical-align:bottom;">
<table width="400" cellpadding="2" cellspacing="2" border="1"
style="font-family:georgia;font-size:14pt">
<tr>
<td align="right">zip code:</td>
<td><input type="text" name="myZipcode" size="12" style="font-
family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="right">city:</td>
<td><input type="text" name="myCity" size="12" style="font-
family:Tahoma;
font-size:14pt; color:#aaaaaa;" /></td>
<td>&nbsp;</td>
</tr>
<tr height="45">
<td align="right">state:</td>
<td>
<select name="state" valign="bottom" style="font-size:12pt;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td>&nbsp;</td>

</tr>

</table>
<input type="submit" value="submit" />
</form>
</body>
</html>

I've moved some stuff around and removed a lot of your alignment
settings. I also set the <tr height="45"> for the state row just to show
you that it is no longer aligning to the top.

As Jonathan stated you had form controls outside the form. They are now
within the form element.

Whether it is syntatically correct, I haven't checked. So apologies to
all here if not.
 
J

John Smith

Thanks to both of you. Once the other two inputs are enclosed in
the form, the alignment works.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

vertical-align a form? 1
SendGrid email issue in responsive Gmail 1
action_page.php form 2
How to have two html audio players on one page? 0
Image shifts to the right when export the page to pdf 4
Vertical align of image in a div tag 7
vertical-align baseline moving table 5
vertical-align 2

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 323

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top