Wednesday, February 27, 2013

The Curious Case of Missing 'px' in Javascript for Chrome/Safari/Firefox


When one uses the transitional DOCTYPE in Chrome/Safari/Firefox, your Javascript assignment of value to marginTop or top will not be successful if you left out the 'px'.

For example, if you want to move a dummy DIV to a height of 100 pixel from the top, you might do this:


document.getElementById('dummy').style.top = 100;



It will work if you are not using the transitional DOCTYPE. If you are using the transitional DOCTYPE, you need to assign it with a 'px' at the end:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .
.
.
document.getElementById('dummy').style.top = 100 + 'px';



in order to make it work for Chrome/Safari/Firefox.

As for IE, it will work whether it is in transitional (quirks) mode or not.

No comments:

Post a Comment