error792
10-16-2006, 12: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 {
background-color:blue;
height: 5em;
width: 5em;
position:absolute;
display:none;
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?
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 {
background-color:blue;
height: 5em;
width: 5em;
position:absolute;
display:none;
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?