Can't get the vertical-align:top to work

Discussion in 'HTML' started by tshad, May 2, 2005.

  1. tshad

    tshad Guest

    I have the following code:
    ****************************************************************************
    *
    <tr >
    <td style="vertical-align:top" >By State:
    <select name="ByState" onchange="__doPostBack('ByState','')"
    language="javascript" id="ByState" columns="3">
    <option selected="selected" value="ALL">All</option>
    <option value="AL">AL</option>
    <option value="AK">AK</option>
    </select>
    &nbsp;By City:
    <select name="ByCity" size="3" multiple="multiple" id="ByCity"
    style="width:160px; border-style:inset">
    </select>
    </td>
    </tr>
    ****************************************************************************
    ****

    I am trying to get all the text and labels to go the top of the cell. The
    problem is that they go to the bottom of the cell. The ByCity listbox is
    the size of 3.

    I tried this:

    <td style="vertical-align:top" >

    And I also tried:

    <tr style="vertical-align:top" >

    But neither one seems to work.

    Thanks,

    Tom
     
    tshad, May 2, 2005
    #1
    1. Advertising

  2. tshad

    Els Guest

    tshad wrote:

    > I have the following code:

    [snip code snippet]
    > I am trying to get all the text and labels to go the top of the cell. The
    > problem is that they go to the bottom of the cell. The ByCity listbox is
    > the size of 3.


    How about a url so that we can see what you're doing wrong? :)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, May 2, 2005
    #2
    1. Advertising

  3. tshad

    tshad Guest

    "Els" <> wrote in message
    news:...
    > tshad wrote:
    >
    >> I have the following code:

    > [snip code snippet]
    >> I am trying to get all the text and labels to go the top of the cell.
    >> The
    >> problem is that they go to the bottom of the cell. The ByCity listbox is
    >> the size of 3.

    >
    > How about a url so that we can see what you're doing wrong? :)


    Sorry, I thought that would be enough.

    I also don't have that code as I worked around it to make it work. Here is
    some other examples where I am having similar problems

    http://www.payrollworkshop.com/samples/testalign2.htm
    http://www.payrollworkshop.com/samples/testalign2.htm
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
     
    tshad, May 3, 2005
    #3
  4. tshad

    tshad Guest

    "tshad" <> wrote in message
    news:Q_Sde.1757$...
    > "Els" <> wrote in message
    > news:...
    >> tshad wrote:
    >>
    >>> I have the following code:

    >> [snip code snippet]
    >>> I am trying to get all the text and labels to go the top of the cell.
    >>> The
    >>> problem is that they go to the bottom of the cell. The ByCity listbox
    >>> is
    >>> the size of 3.

    >>
    >> How about a url so that we can see what you're doing wrong? :)

    >


    I accidently hit the send button before I finished.

    I also don't have that code as I worked around it to make it work. Here is
    some other examples where I am having similar problems

    http://www.payrollworkshop.com/samples/testalign2.htm
    http://www.payrollworkshop.com/samples/testalign3.htm
    http://www.payrollworkshop.com/samples/testalign4.htm
    http://www.payrollworkshop.com/samples/testalign5.htm

    The problem is only in IE. Mozilla and Netscape seem to handle it fine.

    In these - the word "First:" is not lined up to the right of the Cell. It
    seems either the row above or the row below seem to be affecting it. If I
    take out the cell above or below it, it seems to line up fine. Taking out
    the "nowrap"s helps, but doesn't solve the problem. I can increase the cell
    by a lot and that and that seems to help.

    The question is: if it is to be aligned right, why does it end up in the
    middle of the cell (testalign2.htm), anyway?

    Thanks,

    Tom

    >>
    >> --
    >> Els http://locusmeus.com/
    >> Sonhos vem. Sonhos vão. O resto é imperfeito.
    >> - Renato Russo -

    >
    >
     
    tshad, May 3, 2005
    #4
  5. tshad

    Els Guest

    tshad wrote:

    >>>> I have the following code:
    >>> [snip code snippet]
    >>>> I am trying to get all the text and labels to go the top of the cell.
    >>>> The problem is that they go to the bottom of the cell. The ByCity
    >>>> listbox is the size of 3.
    >>>
    >>> How about a url so that we can see what you're doing wrong? :)

    >
    > I also don't have that code as I worked around it to make it work. Here is
    > some other examples where I am having similar problems
    >
    > http://www.payrollworkshop.com/samples/testalign2.htm
    > http://www.payrollworkshop.com/samples/testalign3.htm
    > http://www.payrollworkshop.com/samples/testalign4.htm
    > http://www.payrollworkshop.com/samples/testalign5.htm
    >
    > The problem is only in IE. Mozilla and Netscape seem to handle it fine.
    >
    > In these - the word "First:" is not lined up to the right of the Cell. It
    > seems either the row above or the row below seem to be affecting it. If I
    > take out the cell above or below it, it seems to line up fine. Taking out
    > the "nowrap"s helps, but doesn't solve the problem. I can increase the cell
    > by a lot and that and that seems to help.
    >
    > The question is: if it is to be aligned right, why does it end up in the
    > middle of the cell (testalign2.htm), anyway?


    Why don't you use CSS instead of inline HTML styles?
    Even if only to apply this rule *{border:1px solid red;}, which shows
    that the word First is right aligned in the DIV that you put inside
    that TD.
    I don't do HTML table layouts, and at first sight I can't figure out
    why the DIV doesn't stretch to the right of the TD, but I think it has
    to do with a DIV being a block element and leaving some space to the
    right of it. If I use CSS to set the width of the DIVs to any size at
    all (except %), it instantly stretches to fill the TD.

    If you were using CSS, this would be easy (for me) ;-)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, May 4, 2005
    #5
  6. tshad

    tshad Guest

    "Els" <> wrote in message
    news:14v8o82rg70zw$.eizfxjze7b4d$...
    > tshad wrote:
    >
    >>>>> I have the following code:
    >>>> [snip code snippet]
    >>>>> I am trying to get all the text and labels to go the top of the cell.
    >>>>> The problem is that they go to the bottom of the cell. The ByCity
    >>>>> listbox is the size of 3.
    >>>>
    >>>> How about a url so that we can see what you're doing wrong? :)

    >>
    >> I also don't have that code as I worked around it to make it work. Here
    >> is
    >> some other examples where I am having similar problems
    >>
    >> http://www.payrollworkshop.com/samples/testalign2.htm
    >> http://www.payrollworkshop.com/samples/testalign3.htm
    >> http://www.payrollworkshop.com/samples/testalign4.htm
    >> http://www.payrollworkshop.com/samples/testalign5.htm
    >>
    >> The problem is only in IE. Mozilla and Netscape seem to handle it fine.
    >>
    >> In these - the word "First:" is not lined up to the right of the Cell.
    >> It
    >> seems either the row above or the row below seem to be affecting it. If I
    >> take out the cell above or below it, it seems to line up fine. Taking
    >> out
    >> the "nowrap"s helps, but doesn't solve the problem. I can increase the
    >> cell
    >> by a lot and that and that seems to help.
    >>
    >> The question is: if it is to be aligned right, why does it end up in the
    >> middle of the cell (testalign2.htm), anyway?

    >
    > Why don't you use CSS instead of inline HTML styles?
    > Even if only to apply this rule *{border:1px solid red;}, which shows
    > that the word First is right aligned in the DIV that you put inside
    > that TD.
    > I don't do HTML table layouts, and at first sight I can't figure out
    > why the DIV doesn't stretch to the right of the TD, but I think it has
    > to do with a DIV being a block element and leaving some space to the
    > right of it. If I use CSS to set the width of the DIVs to any size at
    > all (except %), it instantly stretches to fill the TD.
    >

    Ok.

    Here are 3 new pages.

    In http://www.payrollworkshop.com/samples/testalign6.htm, I took out the
    <div> and I added it to "Last Name". Same result: "First Name" is not right
    justified and "Last Name" is.

    In http://www.payrollworkshop.com/samples/testalign7.htm, I cut out a bunch
    of text from the paragraph and now it lines up. But what is really
    happening is that "First Name" is in the same place (like it was absolute
    positioned or something) and the cell just got smaller.

    In http://www.payrollworkshop.com/samples/testalign8.htm, I used CSS for the
    "First Name":

    style="text-align:right; vertical-align:bottom"

    No affect.

    All these pages work correctly (or how I would have expected). I am only
    having the problem with IE.

    Thanks,

    Tom

    > If you were using CSS, this would be easy (for me) ;-)
    >
    > --
    > Els http://locusmeus.com/
    > Sonhos vem. Sonhos vão. O resto é imperfeito.
    > - Renato Russo -
     
    tshad, May 4, 2005
    #6
  7. tshad

    solitaire Guest

    tshad wrote:
    > I have the following code:
    > ****************************************************************************
    > *
    > <tr >
    > <td style="vertical-align:top" >


    <td valign=top>

    KISS rule in effect.
     
    solitaire, May 9, 2005
    #7
  8. tshad

    tshad Guest

    "solitaire" <> wrote in message
    news:6nyfe.3459$941.1627@trnddc08...
    > tshad wrote:
    >> I have the following code:
    >> ****************************************************************************
    >> *
    >> <tr >
    >> <td style="vertical-align:top" >

    >
    > <td valign=top>
    >
    > KISS rule in effect.


    This is what I usually do.

    The problem is that whenever I do, someone is telling me I should use CSS
    styles instead.

    I'm not really sure where I should be using CSS and where not.

    Tom
     
    tshad, May 10, 2005
    #8
  9. tshad

    Adrienne Guest

    Gazing into my crystal ball I observed "tshad"
    <> writing in
    news:n36ge.1150$:

    > "solitaire" <> wrote in message
    > news:6nyfe.3459$941.1627@trnddc08...
    >> tshad wrote:
    >>> I have the following code:
    >>> **********************************************************************
    >>> ****** * <tr >
    >>> <td style="vertical-align:top" >

    >>
    >> <td valign=top>
    >>
    >> KISS rule in effect.

    >
    > This is what I usually do.
    >
    > The problem is that whenever I do, someone is telling me I should use
    > CSS styles instead.
    >
    > I'm not really sure where I should be using CSS and where not.
    >
    > Tom
    >
    >
    >


    If you remove all the presentation from your markup, then it's pretty easy
    to use CSS to style that markup. Of course, the markup has to be valid for
    that to work, but that's not that difficult either.

    I use two stylesheets, one for positioning, and one for colors. That way,
    changing the theme of a site is really, really easy.

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, May 10, 2005
    #9
  10. tshad

    edwatki

    Joined:
    Jul 27, 2006
    Messages:
    1
    Hi,

    Ok the problem is your specifying the td width of the firstname field. You need to delete the width.

    Change the code to be:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <title>:: Staffing Workshop ::</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    body {
    margin-top: 31px;
    }
    .style1 {
    font-size: 18px;
    font-weight: bold;
    }
    -->
    </style>

    <style type="text/css">
    <!--
    .style2 {color: #FF0000}
    .style3 {color: #D4D0C8}
    .leftlink{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #5C5C5C;
    text-decoration: none;
    font-weight:bold;
    }
    .errorMessage{
    font-size:8pt;
    font-weight:bold;
    color:red;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    -->
    </style>

    </head>

    <body>
    <table border="0" cellspace="0" cellpadding="0" width="569" >
    <tr valign="baseline">
    <td colspan="2"><blockquote>
    <div align="justify">Please provide us with the following information so that we may create your account. Once you successfully submit the information to StaffingWorkshop, you will receive an email with your temporary login credentials. </div>
    </blockquote></td>
    </tr>
    <tr valign="baseline">
    <td align="right" valign="baseline" >First Name:</td>
    <td width="420" align="left" >
    <input name="firstName" type="text" size="20" id="firstName" />
    </td>
    </tr>


    <div id="Password"> </div>
    <div id="retypePassword">
    <tr valign="baseline">
    <td align="right" valign="middle" ><span class="style2">*</span> Retype Password:</td>
    <td align="left" >
    <input name="password2" type="password" size="20" id="password2" />
    </td>
    </tr>
    </div>
    </table>
    </body>
    </html>
     
    edwatki, Jul 27, 2006
    #10
    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,191
  2. Rabbit
    Replies:
    1
    Views:
    2,764
    Shimon Sim
    Feb 12, 2006
  3. shank

    vertical-align: bottom

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

    vertical-align and div

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

    how can i get vertical align?

    Giorgio, Jun 18, 2005, in forum: HTML
    Replies:
    4
    Views:
    443
    Jonathan N. Little
    Jun 20, 2005
Loading...

Share This Page