Back To Website Design Forum

XHTML issue - valign not working

  • jford
  • Born
  • Born
  • No Avatar
  • Joined: Jul 09, 2008
  • Posts: 2
  • Status: Offline

Post July 9th, 2008, 2:36 pm

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. }
  11. table.mainwindow {
  12.         margin-left: auto;
  13.         margin-right: auto;
  14.         background-color: #76c2e7;
  15.         width: 781px;
  16.         background-repeat: no-repeat;
  17.         background-position: top right;
  18.         height: 100%;
  19.         }
  21. td.subtitle {
  22.         background-color: #CFCFCF;
  23.         width: 100%;
  24.         height: 25px;
  25.         color: #555555;
  26.         font-size: 12px;
  27.         font-family: Arial;
  28.         text-align: center;
  29.         }


Sorry for all the tables - I need them.

Please help.

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

Post July 9th, 2008, 2:36 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post July 9th, 2008, 2:53 pm

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>.
Strong with this one, the sudo is.
  • jford
  • Born
  • Born
  • No Avatar
  • Joined: Jul 09, 2008
  • Posts: 2
  • Status: Offline

Post July 9th, 2008, 4:16 pm

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.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 95 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.