There are older post out there but there under going maintance so here my problem. I'm centering the web page based on the cleintHeight and clientWidth but ClientHeight is a value of Zero and I'm Kinda lost!!! Its working in Netscape 7 but not IE 6
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center Page Script</title>
<!--
This was created to center any web page into any screen no matter what
the clients computer would be running there screen resolution at. It's
a good idea to keep your web pages 800 pixels by 600 pixels and smaller to fit into 98%
of every machine out here. This script was tested in Internet Explore 6 (not centering it vertically, yet) and Netscape 7.
Any questions or comments about this script Email me at arejay@fidleronline.com.
-->
<style type="text/css">
body {
background-color:#666666;
color:#0000ff;
}
#pagecell {
position: absolute;
top: 100px; /* This will insure a padding from the Top of the browser window if your not centering the page verticaly */
width: 800px; /* Enter in the width of you web page. */
}
</style>
<script language="javascript">
var div_id_Name = "pagecell"; /* Place a set of DIV tags aroung the entire web page and enter the string variable ID */
var center_hori = true; /* Do you want to center the page horizantailly true or false? */
var web_page_width = 800; /* if center_hori is false enter the number ONE */
var center_vert = true; /* Do you want to center the page verticaly true or false? */
var web_page_height = 500; /* if center_vert is false enter the number ONE */
</script>
</head>
<body onResize="javascript: centerIt();">
<div id="pagecell">
<!-- Page the ENTIRE WEB PAGE BETWEEN THE "pagecell" DIV tags to center it! -->
<table border="2">
<tr>
<th>
<table border="1">
<tr>
<th>Blah Blah Blah</th>
<th>Blah Blah Blah</th>
<th>Blah Blah Blah</th>
<th>Blah Blah Blah</th>
</tr>
<tr>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
</tr>
<tr>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
</tr>
<tr>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
<td>Blah Blah Blah</td>
</tr>
</table>
<p>Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. Some more text and more text. </p>
</th>
</tr>
</table>
<!-- Page the ENTIRE WEB PAGE BETWEEN THE "pagecell" DIV tags to center it! -->
</div>
<!-- DO NOT EDIT BELOW THIS LINE, THIS SHOULD BE THE LAST LINES OF CODE BEFORE THE CLOSING BODY AND HTML TAGS -->
<script language="javascript" type="text/javascript">
function moveIt(intLeft, intDown)
{
this.thediv = document.getElementById(div_id_Name);
if ( intLeft > 0 && center_hori == true ) {
this.thediv.style.left = intLeft + 'px';
} else {
this.thediv.style.left = 0 + 'px';
}
if ( intDown > 0 && center_vert == true ) {
this.thediv.style.top = intDown + 'px';
} else {
this.thediv.style.top = 0 + 'px';
}
}
function centerIt()
{
if ( navigator.appName == "Netscape" ){
if ( window.innerWidth > web_page_width && center_hori == true ){
var moveLeft = Math.round( ( window.innerWidth / 2 ) - ( web_page_width / 2 ) );
} else {
var moveLeft = 0;
}
if ( window.innerHeight > web_page_height && center_vert == true ){
moveDown = Math.round( ( window.innerHeight / 2 ) - ( web_page_height / 2 ) );
} else {
var moveDown = 0;
}
moveIt( moveLeft, moveDown );
}
if ( navigator.appName.indexOf ( "Microsoft" ) != -1 ) {
if ( document.body.clientWidth > web_page_width && center_hori == true ) {
var moveLeft = Math.round( ( document.body.clientWidth / 2 ) - ( web_page_width / 2 ) );
}
else if ( document.body.clientWidth <= web_page_width && center_hori == true ) {
var moveLeft = 0;
}
if ( document.body.clientHeight > web_page_height && center_vert == true ) {
var moveDown = Math.round( ( document.body.clientHeight / 2 ) - ( web_page_height / 2 ) );
}
else if ( document.body.clientHeight <= web_page_height && center_vert == true ) {
var moveDown = 0;
}
moveIt( moveLeft, moveDown );
}
alert("The page contents are moving to top: " + moveDown + ", left: " + moveLeft);
}
var c = new centerIt();
</script>
</body>
</html>