I was just doing some updates to one of my sites to fix some dynamic javascript problems that I’d discovered with the past couple of Firefox 3 betas. A page I’d designed back in 2006 had a moving DIV that changed position as a result of a post back from a XmlHttpRequest with a simple little bit of javascript to update the DIV’s “top” CSS property. Pretty run of the mill average stuff.
Curiously, I had found back in 2006 that when setting the “top” property in Opera and Internet Explorer 6 (and I can confirm the same is true for 7 too) , you could just do something like this to set the top property to 50px and all would be well:
divelement.style.top = 50
Firefox however didn’t like this, and instead needed you to do something like this:
divelement.style.top = 50 + "px;"
…i.e. the sort of thing you’d expect to see in a normal CSS style sheet. Combined with a bit of a javascript hack to identify Firefox, this approach worked fine on 2.x. However, when testing with Firefox 3 (betas 3 and 4) I found that the moving DIV no longer moved and that I got a new error from the error console:
Warning: Expected end of value for property but found ';'
This struck me as slightly odd - after all isn’t the semi-colon the end of value? Looking at the generated source code for the page I couldn’t see anything odd. After a bit of head scratching (although it seems obvious to me now!) it turns out that Firefox 3 just didn’t like the semi-colon in the above code, leaving me with this:
divelement.style.top = 50 + "px"
A quick regression test using Firefox 2.x showed that removing the semi-colon didn’t break anything there, so I was good to go. Firefox still doesn’t like it without the “px” there though (unlike IE and Opera), which is a bit of a pain, but at least I know for next time…