By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,720 Members | 1,051 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,720 IT Pros & Developers. It's quick & easy.

Lost ability to center tables vertically

P: n/a
I had some CSS problems, and they were solved by someone who pointed
out to me that I should have <!DOCTYPE ..... at the top of my code,
which I now do.

And it fixed all the inheritance problems, but it caused my ability to
center Tables vertically to disappear. If I remove that top line, all
is good. Except for my previous inheritance problems.

The thing is my code calls one funtion with the parameter $out_msg
which is always in Table format. It then creates the HTML output
inserting my $out_msg as a nested table.

I tried switching the template below to a DIV based structure, but am
too new to it, and turns out I was centering $out_msg on a browser port
that was above my actual browser (i cut off a good 25% of the top, even
though it showed in the HTML source).

Wow, so tired here, is there a way to proper vertically center a table
withing a table?

Thanks, and below is the code that stops cetnering if I include the top
line.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
..01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>zReturn</title>
<LINK REL=stylesheet HREF="zstyles.css" TYPE="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<SCRIPT TYPE="text/javascript" src=/js/javas.js></SCRIPT>
</head>
<body>
<table HEIGHT-"100%">
<tr>
<td VALIGN="MIDDLE">
$out_msg
</td>
</tr>
</table>
</body>
</html>

Dec 27 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Serg wrote:
I had some CSS problems, and they were solved by someone who pointed
out to me that I should have <!DOCTYPE ..... at the top of my code,
which I now do.
If the below is exactly what you are using, it is incorrect. There is a
missing "4" in it. Copy this and don't mess with line length.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
And it fixed all the inheritance problems, but it caused my ability
to center Tables vertically to disappear. If I remove that top line,
all is good. Except for my previous inheritance problems.

The thing is my code calls one funtion with the parameter $out_msg
which is always in Table format. It then creates the HTML output
inserting my $out_msg as a nested table.
You'll have to explain how the "parameter" $out_msg becomes anything
other than a simple text string. You didn't include that in your post.
I tried switching the template below to a DIV based structure, but am
too new to it, and turns out I was centering $out_msg on a browser
port that was above my actual browser (i cut off a good 25% of the
top, even though it showed in the HTML source).
Then you were doing something wrong, probably easy to spot if you'd post
the URL.
Wow, so tired here, is there a way to proper vertically center a
table withing a table?
Nested tables are a Bad Idea™.
Thanks, and below is the code that stops cetnering if I include the
top line.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Incomplete doctype.
<html>
<head>
<title>zReturn</title>
<LINK REL=stylesheet HREF="zstyles.css" TYPE="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<SCRIPT TYPE="text/javascript" src=/js/javas.js></SCRIPT>
What is this script?
</head>
<body>
<table HEIGHT-"100%">
<tr>
<td VALIGN="MIDDLE">
$out_msg
</td>
</tr>
</table>
</body>
</html>


Post the URL.

--
-bts
-Warning: I brake for lawn deer
Dec 27 '05 #2

P: n/a
On 27 Dec 2005 11:15:32 -0800, "Serg" <se****@aol.com> wrote:
<table HEIGHT-"100%">


Is this correct ? Shouldn't it be HEIGHT="100%" ?

-- Steven

Dec 27 '05 #3

P: n/a
"Steven" <No*****@Syd.au> wrote in message
news:r3********************************@4ax.com...
On 27 Dec 2005 11:15:32 -0800, "Serg" <se****@aol.com> wrote:

Is this correct ? Shouldn't it be HEIGHT="100%" ?

yeah, it really is = ... just mistype while posting

Dec 28 '05 #4

P: n/a
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:ua******************************@40tude.net.. .
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


i'd swear this is what i have...

here is a link www.warptv.com/yucky.html
Dec 28 '05 #5

P: n/a
Daniel Kaplan wrote:

www.warptv.com/yucky.html


http://validator.w3.org/check?verbos...com/yucky.html

In standards mode, browsers are required to ignore invalid attributes,
among which is table height.

Every time I see this topic come up, I get visions of a scrolling
content area the size of a matchbook in the middle of the viewport. :(

Why don't you reconsider the need for vertical centering at all?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Dec 28 '05 #6

P: n/a
"kchayka" <us****@c-net.us> wrote in message
news:41*************@individual.net...
http://validator.w3.org/check?verbos...com/yucky.html
nice tool, thanks

In standards mode, browsers are required to ignore invalid attributes,
among which is table height.
so am i stuck between choosing: having my css inheritance work
properly...or...being able to center my content...or rewrite everything i
already wrote from table to div. not oneo f those are pleasant in any way
shape or form
Why don't you reconsider the need for vertical centering at all?


because it does look better if the output is centered.
Dec 28 '05 #7

P: n/a
Els
Daniel Kaplan wrote:
"kchayka" <us****@c-net.us> wrote in message
news:41*************@individual.net...
http://validator.w3.org/check?verbos...com/yucky.html


nice tool, thanks
In standards mode, browsers are required to ignore invalid attributes,
among which is table height.


so am i stuck between choosing: having my css inheritance work
properly...or...being able to center my content...or rewrite everything i
already wrote from table to div. not oneo f those are pleasant in any way
shape or form


No, the fourth option will work:
Valid doctype, set html and body and table to 100% height through CSS.

Height may be invalid as an HTML attribute on a table, it works when
set as table{height:100%;}, but only if html and body are also set at
100%.

This will have drawbacks if you have content that's longer than the
height of the browser window though, especially if you want any
background colour or image for body.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Dec 28 '05 #8

P: n/a
"Daniel Kaplan" <No****@NoSpam.com> wrote in message
news:11***************@nntp.acecape.com...
so am i stuck between choosing: having my css inheritance work
properly...or...being able to center my content...or rewrite everything i
already wrote from table to div. not oneo f those are pleasant in any
way shape or form

I'm sorry but it truly seems to me that CSS is weak for vertical centering
within the viewport , and that tables handle that part better. It doesn't
matter if some people don't like Vert Centering, that's a choice thing.

All these different modes, and versions are driving me nuts (quirk vs.
whatever)! Could you imagine if there were as many different DVD formats as
there seem to me modes here?

ARGH!
Dec 28 '05 #9

P: n/a
"Els" <el*********@tiscali.nl> wrote in message
news:f0***************@locusmeus.com...
so am i stuck between choosing: having my css inheritance work
properly...or...being able to center my content...or rewrite everything
i
already wrote from table to div. not oneo f those are pleasant in any
way
shape or form
No, the fourth option will work:
Valid doctype, set html and body and table to 100% height through CSS.

This will have drawbacks if you have content that's longer than the
height of the browser window though, especially if you want any
background colour or image for body.


There's my one problem, I am drawing info from a DB and posting it to the
screen. Depending on the number of entries, the length of their
description, etc, determinging the exact height of the output is a bit too
much, and not guaranteed. Scrolling is a must.

I think I have decided to give up and go back to quirks mode (which I
believe is no doc declaration at all).

I don't mean to go off on a rant here, but enough. Never actually making a
website before now, I had no idea what a mess this field is...and I'm sorry
but it is. Of course I am new to website design, old school programmer, and
I can be basing my info on incorrect info.

BUt it seems to me with DIV, I cannot create a vertically centered table,
that will scroll properly no matter what the size of my data output is...
Dec 28 '05 #10

P: n/a
Crossposted and follow-up set to
comp.infosystems.www.authoring.stylesheets for being off topic here.

"Daniel Kaplan" <No****@NoSpam.com> wrote:
I'm sorry but it truly seems to me that CSS is weak for vertical centering
within the viewport , and that tables handle that part better. It doesn't
matter if some people don't like Vert Centering, that's a choice thing.


The reason why vertical centering isn't an easy option in CSS is that if
implemented in the way that it is with tables it is difficult to layout
a page because the position of the vertically centered element is
typically dependent on other elements. This can cause many reflows, CSS
tries to avoid those when possible. You may not appreciate this if you
are testing on a local server with a desktop browser, but remember that
CSS needs to work in less favourable conditions also, like rendering on
slow mobile devices who draw content via a very narrow pipe.

Note also that although you should think very carefully before using it
for the reason mentioned above, the CSS 2.x spec allows the same
vertical centering options as with HTML tables via CSS tables, but this
is little known due to the fact that IE hasn't implemented them.

--
Spartanicus
Dec 28 '05 #11

P: n/a
Daniel Kaplan wrote:

All these different modes, and versions are driving me nuts (quirk vs.
whatever)!


It's not that hard. Just code everything with standards mode in mind and
you won't have to think about it again.

I find it curious that people seem to think CSS is something one can
learn well overnight. It has specs just like any programming language
(as does HTML), and it takes time to understand both the syntax and the
logic of what you do with it. Nobody questions that if the language is
Perl or Java. :-\

Regardless, practice makes perfect. You might as well start now.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Dec 28 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.