Avatar of tigermatt
tigermatt
Flag for United Kingdom of Great Britain and Northern Ireland

asked on 

Center a DIV - Firefox/IE issues

I'm using the below code to center - vertically and horizontally - the DIV with id "window" on a page. In IE 6 and 7, the code works perfectly fine and the div appears in the center of the screen; however, Firefox refuses to center the div and places it in the top-left corner.

The div element in question is configured with a z-index higher than the page - and I know something is working, because IE works.

Where have I gone wrong?
function showPopup()
{
 
if (document.getElementById && !document.all) // Detect FF
{
 
var IpopTop = (window.innerHeight - document.getElementById("window").offsetHeight)/2;
var IpopLeft = (window.innerWidth - document.getElementById("window").offsetWidth)/2;
document.getElementById("window").style.left = IpopLeft + window.pageXOffset;
document.getElementById("window").style.top = IpopTop + window.pageYOffset;
}
else // Just assume otherwise (IE) at this stage.
{
 
var IpopTop = (document.body.clientHeight - document.getElementById("window").offsetHeight)/2;
var IpopLeft = (document.body.clientWidth - document.getElementById("window").offsetWidth)/2;
document.getElementById("window").style.left = IpopLeft + document.body.scrollLeft;
document.getElementById("window").style.top = IpopTop + document.body.scrollTop;
}
document.getElementById("window").style.visibility = "visible";
document.getElementById("greypage").style.visibility = "visible";
}
 
 
<div id="window" style="position: absolute;z-index:4;padding:5px;visibility:hidden;display: block;margin:0 auto;width:500px;border:1px solid #000000;background-color: #FFFFFF;">Populated by AJAX</div>

Open in new window

Web Languages and StandardsJavaScriptWeb Components

Avatar of undefined
Last Comment
tigermatt

8/22/2022 - Mon