vertical-align baseline moving table

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

  1. tshad

    tshad Guest

    I have been trying to track this problem for awhile and have finally found
    the cause.

    I have a table in a table. I want to set all my text to
    vertical-align:baseline. This would leave the text towards the top of the
    cell and line adjacent cells according to the baseline of the text. Top
    doesn't work as adjacent cells don't necessarilly align correctly.

    The problem is that IE 6, want's to move the whole table up. What happens
    is that the top of the table is hacked off and you get the last couple of
    lines of text.

    This doesn't happen with vertical-align:top or vertical-align:bottom. It
    only moves the text.

    If the problem were that it was trying to move the table inside of the <td>
    tag, it should do the same for vertical-align:top. But it doesn't.

    Mozilla has no problem at all with this.

    However, Mozilla won't print the border-color, whereas IE will.

    What is happening here?

    I have 3 files:
    http://www.payrollworkshop.com/development/defaulttest1.htm
    vertical-align:top
    http://www.payrollworkshop.com/development/defaulttest1.htm
    vertical-align:bottom
    http://www.payrollworkshop.com/development/defaulttest1.htm
    vertical-align:baseline

    The code:
    *************************************************************************
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Home Page</title>
    <style type="text/css">
    body {
    margin:0;
    }
    td {
    font-size: 10;
    text-decoration: none;
    vertical-align:bottom;
    empty-cells: show;
    }
    </style>
    </head>
    <body>

    <table width="100%" style="height:100%; border-color:#00FF99" border="1"
    cellspacing="0" cellpadding="0">
    <tr height="63">
    <td>test 1</td>
    </tr>
    <tr style="height:20px; ">
    <td >test 2</td>
    </tr>
    <tr>
    <td>

    <table width="100%" style="height:100%; border-color:#CC3333;"
    border="5" cellspacing="0" cellpadding="0">
    <tr>
    <td>
    <p align="center" class="thankYouMessage">Welcome to our Employment
    Website</p>
    <p align="center">Whats New</p>
    <p align="center">Calendar of Events</p>
    <p align="center">Summary</p>
    <p align="center">Search</p>
    <p align="center">Create/Modify Profile </p>
    <p align="center">&nbsp; </p>
    </td>
    </tr>
    </table>

    </td>
    </tr>
    <tr style="height:20px">
    <td>test 3</td>
    </tr>
    <tr style="height:20px">
    <td >test 4</td>
    </tr>
    </table>
    </body>
    </html>
    ***************************************************************************

    Thanks,

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

  2. tshad

    Oli Filth Guest

    tshad wrote:
    > I have been trying to track this problem for awhile and have finally found
    > the cause.
    >
    > I have a table in a table. I want to set all my text to
    > vertical-align:baseline. This would leave the text towards the top of the
    > cell and line adjacent cells according to the baseline of the text. Top
    > doesn't work as adjacent cells don't necessarilly align correctly.
    >
    > The problem is that IE 6, want's to move the whole table up. What happens
    > is that the top of the table is hacked off and you get the last couple of
    > lines of text.
    >
    > This doesn't happen with vertical-align:top or vertical-align:bottom. It
    > only moves the text.
    >
    > If the problem were that it was trying to move the table inside of the <td>
    > tag, it should do the same for vertical-align:top. But it doesn't.
    >
    > Mozilla has no problem at all with this.
    >
    > However, Mozilla won't print the border-color, whereas IE will.
    >
    > What is happening here?


    You don't have a <!DOCTYPE> declaration.

    P.S. You shouldn't specify font-sizes, heights, etc. without units.

    i.e. it should be height="63px", not height="63".

    --
    Oli
    Oli Filth, Feb 3, 2005
    #2
    1. Advertising

  3. tshad

    tshad Guest

    "Oli Filth" <> wrote in message
    news:NuyMd.969$...
    > tshad wrote:
    >> I have been trying to track this problem for awhile and have finally
    >> found the cause.
    >>
    >> I have a table in a table. I want to set all my text to
    >> vertical-align:baseline. This would leave the text towards the top of
    >> the cell and line adjacent cells according to the baseline of the text.
    >> Top doesn't work as adjacent cells don't necessarilly align correctly.
    >>
    >> The problem is that IE 6, want's to move the whole table up. What
    >> happens is that the top of the table is hacked off and you get the last
    >> couple of lines of text.
    >>
    >> This doesn't happen with vertical-align:top or vertical-align:bottom. It
    >> only moves the text.
    >>
    >> If the problem were that it was trying to move the table inside of the
    >> <td> tag, it should do the same for vertical-align:top. But it doesn't.
    >>
    >> Mozilla has no problem at all with this.
    >>
    >> However, Mozilla won't print the border-color, whereas IE will.
    >>
    >> What is happening here?

    >
    > You don't have a <!DOCTYPE> declaration.
    >
    > P.S. You shouldn't specify font-sizes, heights, etc. without units.
    >
    > i.e. it should be height="63px", not height="63".


    I added the Doctype and 63px, but defaultest.htm is still moving the box up.

    Also, why is IE showing the red and green borders and Mozilla not. It is
    showing a stylized type of border, but it is grey.

    Tom
    >
    > --
    > Oli
    tshad, Feb 4, 2005
    #3
  4. tshad

    tshad Guest

    Sorry, I didn't have the correct names for the links (it is
    defaulttest1.htm, defaulttest2.htm and defaulttest3.htm)

    Should be:

    I have 3 files:
    http://www.payrollworkshop.com/development/defaulttest1.htm
    vertical-align:top
    http://www.payrollworkshop.com/development/defaulttest2.htm
    vertical-align:bottom
    http://www.payrollworkshop.com/development/defaulttest3.htm
    vertical-align:baseline

    Thanks,

    Tom
    "tshad" <> wrote in message
    news:pu9Md.230$...
    >I have been trying to track this problem for awhile and have finally found
    >the cause.
    >
    > I have a table in a table. I want to set all my text to
    > vertical-align:baseline. This would leave the text towards the top of the
    > cell and line adjacent cells according to the baseline of the text. Top
    > doesn't work as adjacent cells don't necessarilly align correctly.
    >
    > The problem is that IE 6, want's to move the whole table up. What happens
    > is that the top of the table is hacked off and you get the last couple of
    > lines of text.
    >
    > This doesn't happen with vertical-align:top or vertical-align:bottom. It
    > only moves the text.
    >
    > If the problem were that it was trying to move the table inside of the
    > <td> tag, it should do the same for vertical-align:top. But it doesn't.
    >
    > Mozilla has no problem at all with this.
    >
    > However, Mozilla won't print the border-color, whereas IE will.
    >
    > What is happening here?
    >
    > I have 3 files:
    > http://www.payrollworkshop.com/development/defaulttest1.htm
    > vertical-align:top
    > http://www.payrollworkshop.com/development/defaulttest1.htm
    > vertical-align:bottom
    > http://www.payrollworkshop.com/development/defaulttest1.htm
    > vertical-align:baseline
    >
    > The code:
    > *************************************************************************
    > <html>
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    > <title>Home Page</title>
    > <style type="text/css">
    > body {
    > margin:0;
    > }
    > td {
    > font-size: 10;
    > text-decoration: none;
    > vertical-align:bottom;
    > empty-cells: show;
    > }
    > </style>
    > </head>
    > <body>
    >
    > <table width="100%" style="height:100%; border-color:#00FF99" border="1"
    > cellspacing="0" cellpadding="0">
    > <tr height="63">
    > <td>test 1</td>
    > </tr>
    > <tr style="height:20px; ">
    > <td >test 2</td>
    > </tr>
    > <tr>
    > <td>
    >
    > <table width="100%" style="height:100%; border-color:#CC3333;"
    > border="5" cellspacing="0" cellpadding="0">
    > <tr>
    > <td>
    > <p align="center" class="thankYouMessage">Welcome to our Employment
    > Website</p>
    > <p align="center">Whats New</p>
    > <p align="center">Calendar of Events</p>
    > <p align="center">Summary</p>
    > <p align="center">Search</p>
    > <p align="center">Create/Modify Profile </p>
    > <p align="center">&nbsp; </p>
    > </td>
    > </tr>
    > </table>
    >
    > </td>
    > </tr>
    > <tr style="height:20px">
    > <td>test 3</td>
    > </tr>
    > <tr style="height:20px">
    > <td >test 4</td>
    > </tr>
    > </table>
    > </body>
    > </html>
    > ***************************************************************************
    >
    > Thanks,
    >
    > Tom
    >
    tshad, Feb 5, 2005
    #4
  5. tshad

    Oli Filth Guest

    tshad wrote:
    > "Oli Filth" <> wrote in message
    > news:NuyMd.969$...
    >>
    >>You don't have a <!DOCTYPE> declaration.
    >>
    >>P.S. You shouldn't specify font-sizes, heights, etc. without units.
    >>
    >>i.e. it should be height="63px", not height="63".

    >
    >
    > I added the Doctype and 63px, but defaultest.htm is still moving the box up.


    Not when I try the version I made (i.e. your code with the HTML 4.01
    Strict DOCTYPE).

    >
    > Also, why is IE showing the red and green borders and Mozilla not. It is
    > showing a stylized type of border, but it is grey.
    >


    In my copy, IE, FF, and Opera all display the colours correctly.


    --
    Oli
    Oli Filth, Feb 5, 2005
    #5
  6. tshad

    tshad Guest

    "Oli Filth" <> wrote in message
    news:ERXMd.1$...
    > tshad wrote:
    >> "Oli Filth" <> wrote in message
    >> news:NuyMd.969$...
    >>>
    >>>You don't have a <!DOCTYPE> declaration.
    >>>
    >>>P.S. You shouldn't specify font-sizes, heights, etc. without units.
    >>>
    >>>i.e. it should be height="63px", not height="63".

    >>
    >>
    >> I added the Doctype and 63px, but defaultest.htm is still moving the box
    >> up.

    >
    > Not when I try the version I made (i.e. your code with the HTML 4.01
    > Strict DOCTYPE).
    >


    That did it.

    http://www.payrollworkshop.com/development/defaulttest5.htm

    >>
    >> Also, why is IE showing the red and green borders and Mozilla not. It is
    >> showing a stylized type of border, but it is grey.
    >>

    >
    > In my copy, IE, FF, and Opera all display the colours correctly.


    Only if set to Strict (as you mentioned above) for Mozilla. If set to
    traditional, Mozilla shows grey.

    Also, I noticed that Mozilla (when set to Strict) shows the thick red border
    as a sort of pink on the top and left sides of the border and dark red for
    the bottom and right sides. This is a little different than IE 6 which
    shows the red as dark red for top and left and darker red for bottom and
    right. Not a problem, just would not look the way you designed it in one or
    the other browsers.

    Also, what do I lose if I go to STRICT instead of Traditional in my DOCTYPE
    declaration?

    Thanks,

    Tom
    tshad, Feb 10, 2005
    #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,743
    Shimon Sim
    Feb 12, 2006
  3. Abu Yahya
    Replies:
    4
    Views:
    353
    Arne Vajhøj
    Jul 23, 2011
  4. Stefan Ram
    Replies:
    3
    Views:
    479
    Arne Vajhøj
    Nov 20, 2011
  5. Replies:
    0
    Views:
    629
Loading...

Share This Page