XHTML issue - valign not working

  • jford
  • Born
  • Born
  • jford
  • Posts: 2

Post 3+ Months Ago

Hi,

I'm making a project, and I have decided to use a style I made a few months ago.
Now I'm sure it's 100% validated for XHTML 1.0 & 1.1, but the second I enter:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

at the top of the page, the "td" I use for copyrights stops being at the bottom of the page and sticks to the end of the content.

Meaning: The main table I'm using won't take 100% of the height the page can offer, or the "vertical-align: bottom" doesn't affect the cell anymore and there's something else for XHTML.

My code:
Code: [ Select ]
<html.....head..body..>
<table class="mainwindow" style="height: 100%;" cellspacing="0" cellpadding="0">
     <tr>
         <td>
                <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0">
                <tr>
                     <td style="vertical-align: top;">
                         <table width="100%" cellspacing="0" cellpadding="0">
                         <tr>
                                <td>
                                        ** Content **
                                </td>
                         </tr>
                         </table>
                     </td>
                </tr>
                <tr>
                     <td style="vertical-align: bottom;">
                         <table width="100%" cellpadding="0" cellspacing="0">
                         <tr>
                                <td class="subtitle">**Copy rights **</td>
                        </tr>
                         </table>
                    </td>
             </tr>
            </table>
     </td>
</tr>
</table>
</body>
</html>
  1. <html.....head..body..>
  2. <table class="mainwindow" style="height: 100%;" cellspacing="0" cellpadding="0">
  3.      <tr>
  4.          <td>
  5.                 <table width="100%" style="height: 100%;" cellpadding="0" cellspacing="0">
  6.                 <tr>
  7.                      <td style="vertical-align: top;">
  8.                          <table width="100%" cellspacing="0" cellpadding="0">
  9.                          <tr>
  10.                                 <td>
  11.                                         ** Content **
  12.                                 </td>
  13.                          </tr>
  14.                          </table>
  15.                      </td>
  16.                 </tr>
  17.                 <tr>
  18.                      <td style="vertical-align: bottom;">
  19.                          <table width="100%" cellpadding="0" cellspacing="0">
  20.                          <tr>
  21.                                 <td class="subtitle">**Copy rights **</td>
  22.                         </tr>
  23.                          </table>
  24.                     </td>
  25.              </tr>
  26.             </table>
  27.      </td>
  28. </tr>
  29. </table>
  30. </body>
  31. </html>

Code: [ Select ]
body {
margin:0px 0 0 0;
padding:0 0 0 0;
font:76% Tahoma;
background:#eaeaea url(Style/bg.gif) top center repeat-y;
color:#3a3a3a;
text-align: center;
height: 100%;
}

table.mainwindow {
        margin-left: auto;
        margin-right: auto;
        background-color: #76c2e7;
        width: 781px;
        background-repeat: no-repeat;
        background-position: top right;
        height: 100%;
        }

td.subtitle {
        background-color: #CFCFCF;
        width: 100%;
        height: 25px;
        color: #555555;
        font-size: 12px;
        font-family: Arial;
        text-align: center;
        }
  1. body {
  2. margin:0px 0 0 0;
  3. padding:0 0 0 0;
  4. font:76% Tahoma;
  5. background:#eaeaea url(Style/bg.gif) top center repeat-y;
  6. color:#3a3a3a;
  7. text-align: center;
  8. height: 100%;
  9. }
  10. table.mainwindow {
  11.         margin-left: auto;
  12.         margin-right: auto;
  13.         background-color: #76c2e7;
  14.         width: 781px;
  15.         background-repeat: no-repeat;
  16.         background-position: top right;
  17.         height: 100%;
  18.         }
  19. td.subtitle {
  20.         background-color: #CFCFCF;
  21.         width: 100%;
  22.         height: 25px;
  23.         color: #555555;
  24.         font-size: 12px;
  25.         font-family: Arial;
  26.         text-align: center;
  27.         }


Sorry for all the tables - I need them.

Please help.

Thanks very much,
JFord
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

The vertical-align rule applies to the alignment of the next element in relation to the element the rule is applied to. Not the alignment of child elements in relation to the element it's applied to.

You'll need to use the "valign" attribute to position something at the bottom of a <td>.
  • jford
  • Born
  • Born
  • jford
  • Posts: 2

Post 3+ Months Ago

Thanks for replying.

I switched from valign to vertical-align just now as I thought it may be the source of the problem. So the problem remains even with the valigh. Though now I know that the valign isn't even needed when I'm not adding the DOCTYPE.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 52 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.