?
Solved

XHTML: positioning a table in the center of the window

Posted on 2005-03-19
5
Medium Priority
?
199 Views
Last Modified: 2013-12-16
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
Comment
Question by:AdmiralHorror
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13582391
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
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13584143
<!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
 
LVL 51

Accepted Solution

by:
Ted Bouskill earned 150 total points
ID: 13584708
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
 
LVL 4

Expert Comment

by:ARCglide
ID: 13586420
'tedbilly' solution verified working in Firefox (v1.0.1) and MSIE (v6.2900 XP SP2)

...sweet
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 13586484
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

A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question