Els wrote:
DU wrote:
Els wrote:
john T wrote:
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
As far as I know there are only two ways:
One is with absolute positioning it at 50% from the top, with a
negative margin of half the height of the table.
According to the specs, you will center that table within the middle
of the document, not within the middle of the browser viewport.
The OP didn't state it had to be in the middle of the browser viewport,
neithe did I.
Then I do not understand why one would want to remove a table from
normal flow and then center that table in the middle of the document. It
does not make sense. Can you provide me with an example of demonstrating
the usefulness that I fail to see?
Both MSIE 6
and Mozilla 1.x have bugs regarding %tage with pos. abs.:
Bug 105286: viewport used as containing block for absolutely
positioned elements instead of root (percentage height, %, bottom)
http://bugzilla.mozilla.org/show_bug.cgi?id=105286
this way you lose sight of half the table in a smaller window, with
no way of accessing it by using scrollbars.
I wonder why you say that the browser viewport then would not provide
any scrollbars.
I didn't say it wouldn't provide any scrollbars.
I said you wouldn't be able to access the top of the table using those
scrollbars.
But I made a little test:
http://www.mediatech.nl/~rachel/temp-test/testDU.html
And indeed, no scrollbars at all in Firefox, and unusable ones in Opera
7.23.
IE at least lets the bottom half of the table get accessed by the
scrollbar.
You really should not mention MSIE on this: MSIE has many specs
violation, bugs and flaws regarding their implementation of root element
versus I.C.B. and versus the viewport.
I examined your testDU.html page and I think that page has many problems:
- there is absolutely nothing beside the fixed table in that document.
Now, if you fixed an element in a document, it is because you want such
element to be fixed in the viewport while you're scrolling the rest of
your document. Here, there is nothing to scroll for: that does not make
sense.
- The content of that fixed table is enormous and very long. If you make
any fixed element bigger than the viewport, then you are defeating the
purpose of fixing such element to begin with. A fixed element should
take, use a part of the browser viewport, not exceed it. Now, if your
fixed element is very large *and* very long, then you should examine the
usability and purpose of your webpage.
- You even made sure the font-size would be 40% bigger than normal for
no reason here.
- There is no tabular data in that table. The whole content goes into a
single cell.
For several reasons, your demopage is not realistic.
So don't use that one :-)
The other is by placing it in another table. One cell table even.
Nested tables are definitively NOT a solution; it's a worse solution.
Assuming this code:
#idTable
{
position: fixed;
top: 50%;
margin-top: -125px;
height: 250px;
}
(...)
<table id="idTable" ...>
then it should work perfectly in Mozilla 1.3+ and in Opera 7.x.
Except for not being able to access part of the table in smaller
windows. :-D
How small should the window be regarding the document to be scrolled? If
the window is 200px by 200px (or 300px by 300px), it sure is small: such
dimensions are not realistic for testing an element which is fixed.
Here is are 2 fine webpages with a fixed element (the first one uses a
table if I'm not wrong):
http://mozillanews.org/ (click the yellow padlock)
http://www.texturizer.net/firefox/index.html (choose a style at the end
of the page)
Finally, here's one of mine in the post-scriptum.
DU
-----------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head profile="http://www.ietf.org/rfc/rfc2731.txt">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="DC.title" content="Vertically centering a table">
<meta name="DC.date.created" content="2004-02-21T09:54:03+11:00"
scheme="W3CDTF">
<meta name="DC.date.modified" content="2004-02-21T09:54:03+11:00"
scheme="W3CDTF">
<title>Vertically centering a table</title>
<style type="text/css" media="screen,tv,projection">
#idTable
{
position:fixed;
width:200px;
height:300px;
top:50%;
margin-top:-150px;
}
#idContent {margin-left:220px; padding:8px; border:2px solid green;}
</style>
</head>
<body>
<h1>Descriptive page title</h1>
<table id="idTable" frame="border" rules="all" summary="Weather
predictions for snow for next week" cellpadding="8">
<tr><th>Date</th><th>Value</th></tr>
<tr><td>Feb. 23<sup>rd</sup></td><td>5cm</td></tr>
<tr><td>Feb 24<sup>th</sup></td><td>0cm</td></tr>
<tr><td>Feb 25<sup>th</sup></td><td>4cm</td></tr>
<tr><td>Feb 26<sup>th</sup></td><td>3cm</td></tr>
<tr><td>Feb 27<sup>th</sup></td><td>8cm</td></tr>
<tr><td>Feb 28<sup>th</sup></td><td>2cm</td></tr>
</table>
<div id="idContent">
<p>Some filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p>
<p>Some filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p>
<p>Some filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p>
<p>Some filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p>
<p>Some filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p><p>Some filling</p><p>Some
filling</p><p>Some filling</p>
</div>
<p id="validation"><a href="http://validator.w3.org/check/referer"><img
src="http://www.w3.org/Icons/valid-html401.png" style="width:88px;
height:31px;" title="Verify this page compliance to the strict
definition of HTML 4.01" alt="HTML 4.01 Strict DTD compliant"></a></p>
</body></html>