Weird behaviour with XSLT and javascript when a DOCTYPE is defined

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.

Martin Honnen · Accepted Answer · 2012-07-18 17:59:35Z

2

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.

answered Jul 18, 2012 at 17:59

Martin Honnen

169k6 gold badges100 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ingh.am Over a year ago

Wow thanks. I feel foolish not adding the unit and assuming it was just a int value! Thanks +1 :D

Collectives™ on Stack Overflow

Weird behaviour with XSLT and javascript when a DOCTYPE is defined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related