Browser compatibility for centering function

[Simon Wigzell]

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!

 

[kaeli]

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]

[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.

--

 

[Simon Wigzell]

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?

 

[Mike Foster]

...
Works fine for IE. How do I make it compatible with netscape and most browsers?
...

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

 

[Dan Webb]

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