473,395 Members | 1,464 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,395 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 1373
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...
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: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
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
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
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
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
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...

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.