Question

I have two different div elements on two different webpages that use two different JS files. Both JS files have the same exact alignDiv() function which is used to align a div in the exact center of the page. I call on the following function when the window loads:

JS

function alignDiv(){
  var container= document.getElementById("container");
  var inner= document.getElementById("inner");
  var inHeight=inner.offsetHeight;
  var conHeight=container.offsetHeight;
  var conWidth=container.offsetWidth;
  var inWidth=inner.offsetWidth;

  inner.style.position="absolute";
  inner.style.top=((conHeight-inHeight)/2);
  inner.style.left=((conWidth-inWidth)/2);

}

For one div, it assigns the position, top and left attributes like it is supposed to. For the other div, it only assigns the position attribute, and doesn’t assign the top and left. I have no clue why it is doing this! Thanks for any help.

Answer 1

Your two different pages presumably have different Doctypes. One of which triggers Standards mode and the other triggers Quirks mode.

The top and left properties take lengths. Unless they are 0, lengths must have units. You are assigning Numbers to them.

In standards mode, browsers correctly ignore the rule. In quirks mode, they try to perform error recovery by assuming px.

inner.style.top=((conHeight-inHeight)/2) + "px";
inner.style.left=((conWidth-inWidth)/2) + "px";

… and fix the Quirks mode page so it uses Standards mode. There are many inconsistencies between browsers in Quirks mode that makes it a lot of trouble.