Hi,
is there a better way to center a box on the screen than using the code below - CSS & Javascript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function get_screenheight() {
if (window.innerWidth) {
winW = window.innerWidth;
winH = window.innerHeight;
}
else if (document.documentElement && document.documentElement.c
lientWidth
) {
winW = document.documentElement.c
lientWidth
;
winH = document.documentElement.c
lientHeigh
t;
}
else if (document.body) {
winW = document.body.clientWidth;
winH = document.body.clientHeight
;
}
document.getElementById("t
opspacer")
.style.hei
ght=((winH
-400)/2)+"
px";
document.getElementById("l
eftspacer"
).style.wi
dth=((winW
-501)/2)+"
px";
document.getElementById("r
ightspacer
").style.w
idth=((win
W-501)/2)+
"px";
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
SCROLLBAR-FACE-COLOR:#CCCC
CC;
SCROLLBAR-HIGHLIGHT-COLOR:
#333333;
SCROLLBAR-SHADOW-COLOR:#33
3333;
SCROLLBAR-3DLIGHT-COLOR:#C
CCCCC;
SCROLLBAR-ARROW-COLOR:#666
666;
SCROLLBAR-TRACK-COLOR:#CCC
CCC;
SCROLLBAR-DARKSHADOW-COLOR
:#666666;
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #333333;
}
#topspacer{
clear: both;
}
#mainbox{
width: 500px;
border: 1px solid gray;
height: 400px;
float: left;
background-color: #999999;
}
#leftspacer{
float: left;
height: 400px;
}
#rightspacer{
float: right;
height: 400px;
}
-->
</style>
</head>
<body onload="MM_callJS('get_scr
eenheight(
)');">
<div id="topspacer"></div>
<div id="leftspacer"></div>
<div id="mainbox">
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="60"> </td>
</tr>
</table></div>
<div id="rightspacer"></div>
</body>
</html>
