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

Center a page vertically

P: n/a
Yet another question about vertical centering: How can I center a page
vertically?

I have searched on Google and didn't find anything that works at least on
IE, Opera and Mozilla:
http://milov.nl/code/css/verticalcenter.html
Or using a table: http://www.quirksmode.org/css/centering.html

Is there a way to do it and that works in Opera, IE and Mozilla?
Thanks,

--
Boost the visibility of your web site in Google!
http://www.digitalpoint.com/tools/ad-network/?s=5203

Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

http://www.auriance.com - http://www.auriance.net
Jul 21 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
in comp.infosystems.www.authoring.stylesheets, Unknown User wrote:
Yet another question about vertical centering: How can I center a page
vertically?
There is number of ways, the ones that work on IE require negative
margin, and thus are almost guaranteed to cause inaccessible content.
Is there a way to do it and that works in Opera, IE and Mozilla?
Thanks,


Yes, but it causes content to be inaccessible very easily in IE.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Jul 21 '05 #2

P: n/a
me
"Unknown User" <me@privacy.net> wrote in message
news:op.snz7vcfhr3xrds@cinza...
Yet another question about vertical centering: How can I center a page
vertically?

I have searched on Google and didn't find anything that works at least on
IE, Opera and Mozilla:
http://milov.nl/code/css/verticalcenter.html
Or using a table: http://www.quirksmode.org/css/centering.html

Is there a way to do it and that works in Opera, IE and Mozilla?
Thanks,


This may not be what you wanted but the following works in IE. I don't use
other browsers so I can't say what will happen in them.
Good Luck,
me

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"
align="center">
<tr>
<td>
<div align="center">stuff centered vertically and horizontally</div>
</td>
</tr>
</table>
Jul 21 '05 #3

P: n/a

"Unknown User" <me@privacy.net> wrote in message
news:op.snz7vcfhr3xrds@cinza...
Yet another question about vertical centering: How can I center a page
vertically?


http://apptools.com/examples/tableheight.php

--
Must fly

Roy

www.reeddesign.co.uk
Jul 21 '05 #4

P: n/a
me
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

"Unknown User" <me@privacy.net> wrote in message
news:op.snz7vcfhr3xrds@cinza...
Yet another question about vertical centering: How can I center a page
vertically?


http://apptools.com/examples/tableheight.php

--
Must fly
Roy


Please understand that my comments here are not an aspersion on you Mr.
Reed. From what I've seen yours is the first answer other than my own with
any hope of succeeding.

The solution offered at apptools.com has some problems. It doesn't work in
IE for Mac. This isn't a problem for me since I only design for IE users on
Windows but if accessibility for all is the author's goal then his solution
is a failure.

The DTD on the example pages is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Someone correct me if I'm wrong but this isn't strict is it? If the author's
goal was to avoid quirks mode and use a strict DTD then why didn't he do so
in his own examples?

In the first three examples there is a border around the table but not in
the last example, this inconsistency (oversight?) does not inspire
confidence.
Signed,
me
Jul 21 '05 #5

P: n/a

"me" <anonymous@_.com> wrote in message
news:11*************@corp.supernews.com...
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

"Unknown User" <me@privacy.net> wrote in message
news:op.snz7vcfhr3xrds@cinza...
> Yet another question about vertical centering: How can I center a page
> vertically?


http://apptools.com/examples/tableheight.php

--
Must fly
Roy


Please understand that my comments here are not an aspersion on you Mr.
Reed. From what I've seen yours is the first answer other than my own
with
any hope of succeeding.

The solution offered at apptools.com has some problems. It doesn't work in
IE for Mac. This isn't a problem for me since I only design for IE users
on
Windows but if accessibility for all is the author's goal then his
solution
is a failure.

The DTD on the example pages is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Someone correct me if I'm wrong but this isn't strict is it? If the
author's
goal was to avoid quirks mode and use a strict DTD then why didn't he do
so
in his own examples?

In the first three examples there is a border around the table but not in
the last example, this inconsistency (oversight?) does not inspire
confidence.
Signed,
me


Here's an example based on the AppTools page in XHTML Strict which validates
and works in everything I've tested it in on PC - IE5, 5.5 and 6, FireFox,
Moz, NN7 and Opera 7. I don't have access to a Mac at present.

http://www.reeddesign.co.uk/test/centered.html

And here's a different way to do it. Also XHTML Strict. Also validates.

http://www.reeddesign.co.uk/test/centered2.html

--
Must fly

Roy

www.reeddesign.co.uk
Jul 21 '05 #6

P: n/a
me
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

"me" <anonymous@_.com> wrote in message
news:11*************@corp.supernews.com...
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

"Unknown User" <me@privacy.net> wrote in message
news:op.snz7vcfhr3xrds@cinza...
> Yet another question about vertical centering: How can I center a page > vertically?

http://apptools.com/examples/tableheight.php

--
Must fly
Roy
Please understand that my comments here are not an aspersion on you Mr.
Reed. From what I've seen yours is the first answer other than my own
with
any hope of succeeding.

The solution offered at apptools.com has some problems. It doesn't work in IE for Mac. This isn't a problem for me since I only design for IE users
on
Windows but if accessibility for all is the author's goal then his
solution
is a failure.

The DTD on the example pages is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Someone correct me if I'm wrong but this isn't strict is it? If the
author's
goal was to avoid quirks mode and use a strict DTD then why didn't he do
so
in his own examples?

In the first three examples there is a border around the table but not in the last example, this inconsistency (oversight?) does not inspire
confidence.
Signed,
me


Here's an example based on the AppTools page in XHTML Strict which

validates and works in everything I've tested it in on PC - IE5, 5.5 and 6, FireFox,
Moz, NN7 and Opera 7. I don't have access to a Mac at present.

http://www.reeddesign.co.uk/test/centered.html

And here's a different way to do it. Also XHTML Strict. Also validates.

http://www.reeddesign.co.uk/test/centered2.html

--
Must fly

Roy


I have no problem taking your word that those pages validate. I myself am
not concerned with validation. Some in this NG claim that it is unacceptable
to do anything that is less than completely accessible to all users. Based
on the claims made by AppTools I was supprised that the author would advise
against using tables and instead suggest a method that fails in IE on Mac.
Signed,
me
Jul 21 '05 #7

P: n/a
me wrote:
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

http://apptools.com/examples/tableheight.php


The solution offered at apptools.com has some problems. It doesn't work in
IE for Mac. This isn't a problem for me since I only design for IE users on
Windows but if accessibility for all is the author's goal then his solution
is a failure.


You should learn what web accessiblity is and is not.

Accessibility has nothing to do with looking the same, or even similar,
in different browsers. The ability to center content (or not) ain't it,
for sure.

And FWIW, MacIE is a dying browser. I, for one, have mostly given up
trying to cater to its eccentricities.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #8

P: n/a
me
"kchayka" <us****@c-net.us> wrote in message
news:3a*************@individual.net...
me wrote:
"Roy Reed" <ro*****@XXXreeddesign.co.uk> wrote in message
news:42**********************@news.zen.co.uk...

http://apptools.com/examples/tableheight.php
The solution offered at apptools.com has some problems. It doesn't work in IE for Mac. This isn't a problem for me since I only design for IE users on Windows but if accessibility for all is the author's goal then his solution is a failure.


You should learn what web accessiblity is and is not.

Accessibility has nothing to do with looking the same, or even similar,
in different browsers. The ability to center content (or not) ain't it,
for sure.


Maybe, it's dam hard to tell what some people in this (and .authoring.html)
NG want. Some seem violently opposed to IE, JS or doing anything at all that
might not be 100% acessible to every browser on the planet.
And FWIW, MacIE is a dying browser. I, for one, have mostly given up
trying to cater to its eccentricities.


From that I conclude you feel certain groups are expendable, is that how you
define good accessibility?
Signed,
me
Jul 21 '05 #9

P: n/a
me wrote:
"kchayka" <us****@c-net.us> wrote in message
news:3a*************@individual.net...
And FWIW, MacIE is a dying browser. I, for one, have mostly given up
trying to cater to its eccentricities.


From that I conclude you feel certain groups are expendable, is that how you
define good accessibility?


Again, you are mistaking the visuals for accessibility.

By my comment I only meant that I no longer bend over backwards trying
to give comparable renderings between MacIE and other modern browsers
any more. It has fallen more into the Netscape 4 category and will get
minimally styled content if its CSS quirks can't easily be overcome.

This is another concept you probably have a hard time comprehending.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #10

P: n/a
me
"kchayka" <us****@c-net.us> wrote in message
news:3a*************@individual.net...
me wrote:
"kchayka" <us****@c-net.us> wrote in message
news:3a*************@individual.net...
And FWIW, MacIE is a dying browser. I, for one, have mostly given up
trying to cater to its eccentricities.
From that I conclude you feel certain groups are expendable, is that how you define good accessibility?


Again, you are mistaking the visuals for accessibility.

By my comment I only meant that I no longer bend over backwards trying
to give comparable renderings between MacIE and other modern browsers
any more. It has fallen more into the Netscape 4 category and will get
minimally styled content if its CSS quirks can't easily be overcome.


I assumed as much, I just wanted to see what you'd say.
This is another concept you probably have a hard time comprehending.


Undoubtedly (sigh) I guess I'll just have to muddle along.
Signed,
me
Jul 21 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.