vertical align - form in a cell

Discussion in 'HTML' started by John Smith, Nov 12, 2010.

  1. John Smith

    John Smith Guest

    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>
    ................
    John Smith, Nov 12, 2010
    #1
    1. Advertising

  2. John Smith wrote:

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


    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.


    Post the URL. You're welcome.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Nov 12, 2010
    #2
    1. Advertising

  3. John Smith

    John Smith Guest

    Jukka K. Korpela wrote:
    > John Smith wrote:
    >
    >> 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.

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

    >
    > Post the URL. You're welcome.
    >


    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>
    John Smith, Nov 12, 2010
    #3
  4. John Smith wrote:
    >
    >
    > Jukka K. Korpela wrote:
    >> John Smith wrote:
    >>
    >>> I have a form in a cell.

    >>
    >> URL?


    <snip>

    > 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">


    <snip code not url>

    http://lmgtfy.com?q=what is a url

    Even in your snippet you realize that two of your form controls are not
    within the form element?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 12, 2010
    #4
  5. John Smith

    Peter Guest

    In article <ibjna4$qq6$>, says...
    >
    >
    > Jukka K. Korpela wrote:
    > > John Smith wrote:
    > >
    > >> 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.

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

    > >
    > > Post the URL. You're welcome.
    > >

    >
    > 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>
    >


    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.

    --
    Pete Ives
    Remove All_stRESS before sending me an email
    Peter, Nov 12, 2010
    #5
  6. John Smith

    John Smith Guest

    Thanks to both of you. Once the other two inputs are enclosed in
    the form, the alignment works.
    John Smith, Nov 12, 2010
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,134
  2. Rabbit
    Replies:
    1
    Views:
    2,742
    Shimon Sim
    Feb 12, 2006
  3. shank

    vertical-align: bottom

    shank, Oct 2, 2003, in forum: HTML
    Replies:
    9
    Views:
    20,898
    brucie
    Oct 3, 2003
  4. Jochen Fuhrmann

    vertical-align and div

    Jochen Fuhrmann, Oct 6, 2003, in forum: HTML
    Replies:
    1
    Views:
    24,437
    Steve Pugh
    Oct 6, 2003
  5. Lanmind

    vertical-align a form?

    Lanmind, Sep 19, 2008, in forum: HTML
    Replies:
    1
    Views:
    909
    Lanmind
    Sep 19, 2008
Loading...

Share This Page