473,249 Members | 1,674 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,249 software developers and data experts.

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

Similar topics

4
by: Jez Naisbitt | last post by:
Hi Guys, After a break of 2 years I'm now re-visiting the world of java. I recall on my last foray that I had to stick to java 1.1 so I could deploy applets from a server and obtain maximum...
4
by: Simba | last post by:
In some pages of my website I use a code like the following: for (var n = 0; n < getTagsArray("SPAN").length; n++){ //SPAN is just an example. I also use other tags tag =...
11
by: Simon Wigzell | last post by:
I cobbled together the following function from examples on the internet to set named spanned items in the parent form. It works fine for IE but not at all for netscape. What other browser...
4
by: George Hester | last post by:
http://pages.ebay.com/help/new/browser-recommendations.html The reason being that other browsers are just plain buggy. Netscape 6+ surely is. Opera I do not know much about but I hear it can...
5
by: Trenqo 0 | last post by:
Instead of doing repetitive checks throughout my code, or defining new methods that won't work unless they are included, I have taken the approach of redefining existing methods in order to make...
3
by: ms | last post by:
Hi Everyone, You all would be aware of the fact that we boast about .net supporting multiple web browsers. I hope we have all experienced that our screen layouts look different in every other...
4
by: Maxwell2006 | last post by:
Hi, I am struggling with making my website compatible with multiple browsers and versions. Is there any tool that shows me how my pages look like in different browsers
27
by: David Golightly | last post by:
This is just a quick poll for all you web devs out there: What browsers do you test on/are concerned about compatibility with? Obviously, you're going to test on current-generation browsers such...
1
by: mark4asp | last post by:
<!-- // How to detect the rendering mode which the browser is currently in (works for IE6). // Ctrl+Shift+s displays indicates whether the browser is in quirks or standards mode. // Detect...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

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.