小公司做通用服务的一个比喻 >>
<< 女鬼小倩
Re:XHTML and CSS height:100%

Author Zhou Renjian Create@ 2005-12-11 23:09
whizz Note icon

Original:
http://www.bernzilla.com/item.php?id=116

http://www.bernzilla.com/item.php?id=370

XHTML and Table Height

Originally posted on December 12, 2003 10:04 PM in Web Development

As I've been tinkering around with XHTML 1.0 Strict this past week I've come across some very fine points that can mean a great deal to someone doing web development work. One example that I struggled with for quite a while was the old school method of using the table height attribute to center content vertically on a web page.

As it turns out, the table definition in the XHTML 1.0 Strict DTD does not allow for any specification of height. It was apparently decided that this keeps presentation separated from structure. However, this omission can make things a little hairy for developers who wish to vertically align content and not break their XHTML validity.

Now I've read plenty of opinions about just how important standards are when they hinder the task at hand in such a way, and they are definitely valid. In the case of table height, a developer merely has to rely on quirks mode to get the job done, using old HTML code that we used back in the old days of web design. To see what I mean, consider the following example:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <body>
  <table style="height: 100%; width: 100%; background-color: #CCC;">
   <tr>
    <td>
     Centered Content
    </td>
   </tr>
  </table>
 </body>
</html>

It's as simple as this: without the red code, the table will do what you want it to ?C with it the table will not. So it comes down to whether valid XHTML means more to you, or whether the appropriate functionality means more to you. In this day and age, it's a toss-up for me and a hard decision to make, even though my older self would have never even flinched at the thought of using a dirty workaround. Back then I'd consider using the <marquee> tag though, so let's keep things in perspective.

XHTML and Table Height Revisited

Originally posted on November 06, 2004 4:01 PM in Web Development

About a year ago I posted to my blog about my inability to center content vertically on a page while still complying with the XHTML 1.0 Strict DOCTYPE. Last week, John Wood dropped by to enlighten me with a solution.

John, you're exactly right. Adding CSS height declarations to the html and body elements allows for standard-compliant code and the desired effect. The following code validates as XHTML 1.0 Strict:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>Table Height Test</title>
  <style type="text/css">
   <!--
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    table {
     height: 100%;
     width: 100%;
     background-color: #CCC;
    }
    td {
     text-align: center;
    }
   //-->
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>
     Centered Content
    </td>
   </tr>
  </table>
 </body>
</html>

Thanks for sharing that with me!

本记录所在类别:
本记录相关记录: