468,532 Members | 1,706 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,532 developers. It's quick & easy.

Browser compatibility for centering function

I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a

onresize="CenterIt();"

in the body tag.

Works fine for IE. How do I make it compatible with netscape and most browsers? Better yet, is there a good single source that explains how to write javascript to be compatible with all browsers? 766 and 435 are the width and height of my table that surrounds the website data defined so:

<TABLE id="Main" style="position:absolute; z-index:0; top:0; left:0;">

function CenterIt()
{
newOffsetWidth = 0;
newOffsetHeight = 0;
if (document.getElementById)
{
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layers)
{
/*
What goes here????
*/
}

if (winW > 766)
newOffsetWidth = ((winW - 766) / 2) - 10;
if (winH > 435)
newOffsetHeight = ((winH - 435) / 2);

if (document.getElementById)
{
document.getElementById('Main').style.left = newOffsetWidth;
document.getElementById('Main').style.top = newOffsetHeight;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layers)
{
/*
What goes here????
*/
}

}
CenterIt();

Thanks!
Jul 23 '05 #1
6 1209
In article <OfUIc.6646$Mr4.1524@pd7tw1no>, si**********@shaw.ca
enlightened us with...
I have the following funciton that centers my website content for any size
window and will center it in real time as the window is expanded or shrunk.


Why? All you need is a good stylesheet and decent design to accomplish
this in all browsers, and it won't break when a user disables script
[1].
[1] NN4 has a problem with disabling CSS/script. Too tightly integrated,
disabling one tends to break both.

--
--
~kaeli~
A hangover is the wrath of grapes.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #2
On Tue, 13 Jul 2004 12:52:33 -0500, kaeli wrote:
[1] NN4 has a problem with disabling CSS/script.


....I had a page with a background color and font
defined in a stylesheet. No script, just HTML
elements (an <H1> and <P> elements AFAIR).

NN4 did not retain the font all the way to
the bottom of the page, instead it reverted
from the sans serif font I'd specified, to
it's own default serif. [ Though it did
render the BG color reliably.. ;-) ]

I validated the very simple HTML and CSS..
both fine. Never figured it out, could no
longer be bothered.

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology
Jul 23 '05 #3
In article <ho***************************@40tude.net>,
Se********@www.invalid enlightened us with...
On Tue, 13 Jul 2004 12:52:33 -0500, kaeli wrote:
[1] NN4 has a problem with disabling CSS/script.


...I had a page with a background color and font
defined in a stylesheet. No script, just HTML
elements (an <H1> and <P> elements AFAIR).

NN4 did not retain the font all the way to
the bottom of the page, instead it reverted
from the sans serif font I'd specified, to
it's own default serif. [ Though it did
render the BG color reliably.. ;-) ]

I validated the very simple HTML and CSS..
both fine. Never figured it out, could no
longer be bothered.


If you tried to style the font in the body instead of each element,
IIRC, that was a known NN4 bug with CSS inheritance.

NN4 really has pretty terrible CSS support, but it can be coded around
for some things. Most people who still have to support it import
different stylesheets for NN4 and everything else, it's so bad. *g*
I used tables for layout when I had to support it. I still use tables
for layout sometimes, as CSS support is still not 100% cross-browser.

But as far as just centering content (OP), it really doesn't get much
easier than
<div align="center">
content
</div>
(the center tag is deprecated)

If you've got really complicated stuff in there, sometimes the best is
still
<table width="90%" align="center" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td valign="top" align="left">
content
</td>
</tr>
</table>
(width is any percent you like and I think this does not work with a
strict doctype, but IME few people use a strict doctype comparitively
speaking.)

If you had complicated enough CSS where you were playing with absolute
positioning that would place the content outside the table, this
question (OP) would be a moot point anyway.

--
--
~kaeli~
A bicycle can't stand on its own because it is two tired.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4
My function also centers vertically, in fact that was the main point. I guess I could forget the horizontal centering and just use a table align=center but that doesn't change my objective here or my question - how do I make this piece of code work for other browsers?
Jul 23 '05 #5
Simon Wigzell wrote:
...
Works fine for IE. How do I make it compatible with netscape and most browsers?
...


Cross-Browser DHTML Resource: http://cross-browser.com/

:-)
Jul 23 '05 #6
Hi,

I've just written this script and it seems to work pretty well on the
browsers Ive got installed (IE5+, Mozilla, Firefox, Opera on PC) so it
might help you out. It does vertical centering only leaving the horiz
centering to CSS (you can see an example of that in this page too).

Theres no documentation Im afraid as its just hot of the keyboard but
its fairly self explanatory (I hope)...

http://www.danwebb.net/tests/vert/bum.html

Hope it helps,

Dan
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Jez Naisbitt | last post: by
4 posts views Thread by Simba | last post: by
11 posts views Thread by Simon Wigzell | last post: by
4 posts views Thread by Maxwell2006 | last post: by
27 posts views Thread by David Golightly | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.