Within our XLST, we utilize "vanilla" JavaScript to manipulate certain div elements within our reports. One particular div sits in the center of the screen and overlaps all other content. The code snippet below is used to position this div 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 functionality also triggers when the page is resized or scrolled, and it functions correctly. However, an issue arose due to the lack of a doctype declaration in our XSLT, causing Internet Explorer to enter quirks mode which disrupted the layout. After adding an HTML5 doctype, the previous positioning code no longer has any effect. I added alert messages to check the values of overlayObj.style.left, and found that without a doctype, the correct dimensions are returned, but with a doctype, the value auto is returned instead.
Can anyone explain why this behavior is occurring? And what steps can be taken to retrieve the correct values?
When attempting to access the data using the following code:
var computedStyle = window.getComputedStyle(overlayObj, null);
alert("left value: " + computedStyle.getPropertyValue("left"));
Trying to retrieve overlayObj.style.top with a doctype present does not yield any response. Conversely, without the doctype, the value is successfully returned.