[thelist] centering table in window

Andrew Clover and at doxdesk.com
Sat Apr 20 18:11:01 CDT 2002


Rachel Starr <rachel at pinkcandyproductions.com> wrote:

> Could someone please tell me why this table will not center vertically in
> the window in IE6 (PC)?

height is not a valid attribute for <table> in HTML 4. When you use a full
DOCTYPE you enable Standards Mode, which ignores the attribute for this
reason.

You can try using a 'height: 100%' style instead, and it may work on some
browsers. This is generally okay for centring, but for other uses of
100% height tables such as footers at the bottom of the page; a CSS
'height: 100%' property means the height is always 100% of the viewport,
even when the element contains more content than fits in the window!
In this case the content will spill out of its container and the footer
effect won't work. [Oddly, Mozilla seems to treat 'height: 100%' differently
when declared on table than other elements, so this can sometimes still
work the way you expect.] You should be able to get the 'size of content
or size of window if that's bigger' effect by using auto height and the
property 'min-height: 100%;', but that only seems to work on Opera. ANYWAY.

Another way of getting centring for a known-height element without using
tables is:

  <div style="position: absolute; left: -[X/2]px; top: -[Y/2]px;
              width: 100%; height: 100%;">
  <div style="position: absolute; left: 50%; top: 50%;
              width: [X]px; height: [Y]px;">
    ...content...
  </div></div>

--
Andrew Clover
mailto:and at doxdesk.com
http://and.doxdesk.com/



More information about the thelist mailing list