View Full Version : Center Dynamic Content

10-16-2006, 01:42 AM
I need to center (horizontally as well as vertically) a div on screen. It will be in front of everything else on the page and will include dynamic HTML content. (radio buttons, text input, etc.) Essentially it's an in-page popup. (Don't call me evil, this is for a game I'm making.) So far I can get FF to center it with this code:

function ShowBox(str,MsgBox){
MsgBox.innerHTML = str;

var style = gStyle(MsgBox,null);
var h = parseFloat(style.height);
var w = parseFloat(style.width);

MsgBox.style.left = (gWinWidth() - w) / 2 + "px";
MsgBox.style.top = (gWinHeight() - h) / 2 + "px";

MsgBox.style.display = "block";

Where gStyle is a cross-browser alias for getComputedStyle, str is the message I want displayed in the box, and MsgBox is the div that acts as the popup.

And here is the CSS I'm applying to MsgBox:

#msgbox {
height: 5em;
width: 5em;

border: 0.15em solid navy;
text-align: center;

font-family: sans-serif;
font-size: 5em;

overflow: hidden;

Unfortunately, IE gets this totally messed up; it says that h and w are 5, while FF says 400.

Also, in IE the text is not displayed at all, in FF only the bottom half is shown, any idea how I can fix that?

10-16-2006, 03:44 AM
Please show us where gStyle() is defined.

10-16-2006, 04:56 AM
Sorry. Here's the functions I'm using:

function gWinHeight() {
if( typeof( window.innerHeight ) == 'number' ) {
return window.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
//IE 6+ in 'standards compliant mode'
return document.documentElement.clientHeight;
} else if( document.body && document.body.clientHeight ) {
//IE 4 compatible
return document.body.clientHeight;

function gWinWidth() {
if( typeof( window.Width ) == 'number' ) {
return window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth ) {
//IE 6+ in 'standards compliant mode'
return document.documentElement.clientWidth;
} else if( document.body && document.body.clientWidth ) {
//IE 4 compatible
return document.body.clientWidth;

function gStyle(node,mode){ //rhymes!
if (node.currentStyle) return node.currentStyle;
else if (getComputedStyle) return getComputedStyle(node,mode);