• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 202
  • Last Modified:

XHTML: positioning a table in the center of the window

I can't believe I am asking this, but how do you position a table in the middle of the screen using proper XHTML 1.1, so that it would work in IE and Mozilla?

In HTML I would create a table with width and height set to 100% and inside that table would place another table, the one I want to be in the middle of the browser window. This, however, doesn't seem to work in XHTML. The closest I could get to the desired result was this code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
   <title>Title</title>
   <style type="text/css">
      .tableOuterFrame { width: 100%; height:100%; }
      .tableCriticalError { width: 400px; margin: auto; border-width: thin; border-style: solid; border-color: black; }
      .cellCriticalErrorHeader { height: 30px; text-align: left; color: white; background-color: blue; padding-left: 10px; font-size: 12pt; }
      .cellCriticalErrorBody { height: 200px; text-align: center; font-size: 12pt; }
   </style>
</head>
<body style="margin: 0; padding: 0; height: 100%">
<table class="tableOuterFrame"><tr><td>
<table class="tableCriticalError">
<tr><td class="cellCriticalErrorHeader">Critical Error</td></tr>
<tr><td class="cellCriticalErrorBody">Record not found</td></tr>
</table></td></tr></table>
</body>
</html>

...which works in IE but doesn't work in Mozilla.

Please help.

Thank you
0
AdmiralHorror
Asked:
AdmiralHorror
1 Solution
 
COBOLdinosaurCommented:
You position elements in standard compliant browsers using the the margins

style="margin-left:auto; margin-right:auto; width:400px"

However, using an unrelialbe and very lightly supported doctype like XHTML1.1 may result in failure for some browsers. If you do a minor change to the page that results in something they don't undestand they go into quirks mode.  

I never guarantee any CSS will work correctly across browsers when XHTML doctypes are used, because of the lack of support for them by the browser manufacturers.

Unless actually must have XML support for a page you should use HTML4.1 strict;  Then the margin:auto works identically across all mainstream browsers.

Cd&


0
 
rdivilbissCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<style>
<!--
body {
      font-family: Verdana, Arial, Helvetica, Sans Serif;
      }
#header {
      style="position: relative";
      margin-left:auto;
      margin-right:auto;
      width:auto;
      height:30px;
      color:#FFFFFF;
      background-color:#0000FF;
      padding-left:10px;
      padding-top:5px;
      font-size:14px;
      font-weight:bold;
      }

#wrapper {
      border: 2px solid #000000;
      margin-left:auto;
      margin-right:auto;
      width:400px;
      }

#errbody {
      position: relative;
      width:auto;
      margin-left:auto;
      margin-right:auto;
      height:200px;
      text-align:center;
      font-size:14px;
-->      
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">Critical Error</div>
  <div id="errbody">Record not found</div>
</div>  
</body>
</html>
0
 
Ted BouskillSenior Software DeveloperCommented:
Well the previous 2 answers didn't center it vertically.  Try this in Mozilla.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
   <title>Title</title>
   <style type="text/css">
            BODY
            {
                  background-color: White;
                  margin: 0px;
                  padding: 0px;
                  height: 100%;
            }
            DIV.outer
            {
                  position:absolute;
                  left:50%;
                  top:50%;
                  width:400px;
                  height:230px;
                  margin-left:-200px;
                  margin-top:-115px;
            }
            DIV.inner
            {
                  position:absolute;
                  left:50%;
                  top:50%;
                  width:400px;
                  height:230px;
                  margin-left:-200px;
                  margin-top:-115px;
            }
      .tableCriticalError { width: 400px; margin: auto; border-width: thin; border-style: solid; border-color: black; }
      .cellCriticalErrorHeader { height: 30px; text-align: left; color: white; background-color: blue; padding-left: 10px; font-size: 12pt; }
      .cellCriticalErrorBody { height: 200px; text-align: center; font-size: 12pt; }
   </style>
</head>
<body style="margin: 0; padding: 0; height: 100%">
<div class="outer">
      <div class="inner">
            <table class="tableCriticalError">
            <tr><td class="cellCriticalErrorHeader">Critical Error</td></tr>
            <tr><td class="cellCriticalErrorBody">Record not found</td></tr>
            </table>
      </div>
</div>
</body>
</html>
0
 
ARCglideCommented:
'tedbilly' solution verified working in Firefox (v1.0.1) and MSIE (v6.2900 XP SP2)

...sweet
0
 
rdivilbissCommented:
Sorry, didn't notice he wanted it centered vertically, just middle (which to me means horizontal).

I would still listen to Cd& and NOT use XHTML document types until the clients are able to support them.

Use HTML 4.01 strict.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now