Question

In my XLST, we use “vanilla” javascript to manipulate some divs that are in our reports. One of them goes above everything else in the center of the screen, and I was calling it like so when the page loads:

var overlayObj = document.getElementById('theoverlay');
overlayObj.style.left = Math.max(0, ((window.innerWidth - overlayObj.offsetWidth) / 2) + window.scrollX);
var padding = 50;
overlayObj.style.top = window.scrollY + padding;
overlayObj.style.bottom = -window.scrollY + padding;

This is also called when the page is resized + scrolled, and it works fine, however I noticed that there was no doctype in our XSLT and this was causing quirks mode in IE which just about broke everything. So I added the HTML5 doctype and now the code above doesn’t do anything. I’ve put in alerts to fire out the values of overlayObj.style.left and when there is NO doctype in the file I get the exact div sizes back, but when there is a doctype I get the value auto.

Does anyone know why this might be happening? And how to make it give me the values?

When getting the data I was using:

var computedStyle = window.getComputedStyle(overlayObj, null);
alert("left value: " + computedStyle.getPropertyValue("left"));

If I try to return overlayObj.style.top when there is a doctype, I get no response. Again, without the doctype there is no problems and the value is returned.

Answer 1

Well with quirks mode the browser does try to make sense of your broken CSS but in standards mode you need to make sure you assign a proper CSS value to top or left and that consists of a number and a unit e.g. foo.style.left = 200 + 'px';. So make sure you provide that unit and the assignment should work.