473,403 Members | 2,284 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,403 software developers and data experts.

Center a page vertically

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
10 10328
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
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

"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
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

"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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Tony Vasquez | last post by:
Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use...
27
by: FL | last post by:
Hi Everyone, I know howto center a block using margin-left: auto ; margin-right: auto ; but I'm trying to center vertically a box, any idea to solve this?
10
by: john T | last post by:
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.
3
by: steven | last post by:
Hi, I'm trying to center an image in a div, both horizontally and vertically. (Each div holds a thumbnail image.) Here's the HTML: <div class="thumb"> <div> <img src="tn_02-2022.jpg" />...
4
by: Qzmicro | last post by:
If I want to center my content vertically, as well as horozontally like at www.ingenial.com how might I go about doing that? Any suggestions would be appreshiated. Javascript novice here. Much...
11
by: Serg | last post by:
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...
1
by: Rabbit | last post by:
Dear All I'm new to use ASP.Net for developement, can someone tell me how can I create a web form with size say 300px x 300px, align vertically center on the page Because so far I can use Div...
4
by: John | last post by:
Is it possible to center a memo field value vertically? I use a memo field for printing address labels and I would like the addresses to show up centered vertically. Thanks, john
2
by: jerrygadd | last post by:
Can some body help me vertically center an image using CSS? The customer only uses IE, and so the code is not debugged for other browsers! The image in question is found on line 1075 :...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.