473,806 Members | 2,944 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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="Cente rIt();"

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.getEl ementById)
{
winW = document.body.o ffsetWidth;
winH = document.body.o ffsetHeight;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layer s)
{
/*
What goes here????
*/
}

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

if (document.getEl ementById)
{
document.getEle mentById('Main' ).style.left = newOffsetWidth;
document.getEle mentById('Main' ).style.top = newOffsetHeight ;
}
else if (document.all)
{
/*
What goes here????
*/
}
else if (document.layer s)
{
/*
What goes here????
*/
}

}
CenterIt();

Thanks!
Jul 23 '05 #1
6 1396
In article <OfUIc.6646$Mr4 .1524@pd7tw1no> , si**********@sh aw.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
3019
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 compatibility with the standard browsers, supplied on all platforms: We live in the pre-press industry where folk use diverse platforms such as Sparc, Mac, PC (mnimum Win2K, or XP), using Netscape and Internet Explorer, etc.
4
5481
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 = getTagsArray("SPAN"); //make something with tag... }
11
5599
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 conditions do I need to test for and what is the correct syntax for the sode so that I am covered for all cases? Thanks! function WriteContent(name, newText) { var browser=navigator.appName var version=parseInt(navigator.appVersion)
4
1451
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 run in IE simulated mode. For me to spend time on browser compatibility takes time away from what is to be learned what IE can do. It's just the way the World turns. When something buggy is made it is just a matter of time before it is no longer...
5
3099
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 them as cross browser compatible as possible. For example: if(!document.getElementById) { if(document.all)
3
1697
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 browser. (Netscape being the worst!) So how far can we agree on this statement? Manoj
4
4302
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
2755
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 as IE6, IE7, Firefox 1.5/2, Opera 8/9, Safari 2, etc. How old must a browser be before you stop worrying about it? Anybody here still test on IE4? Thanks,
1
2483
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 keypress var captureKeys = function(ev) { ev = ev || window.event; // gets the event in ie or ns kCode = ev.keyCode || ev.which; // gets the keycode in ie or ns
0
9719
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10620
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10372
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10110
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9187
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6877
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4329
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3851
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3008
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.