CSS: why does setting margin-top only work in Webkit?

Question

Here is a test case/live example. Summary of problem:

This only works in WebKit:

Y.one('#container').setStyle('margin-top', 100);

This works in all browsers:

Y.one('#container').setStyle('margin', 100);

Why does setting margin-top work only in WebKit?

EDIT: the fix is shown below in one of the answers. You need to have marginTop here, and then it works. So, the edited question is, WHY do you need marginTop and not margin-top in this case?

Answer 1

This is working for me in firefox:

<div id="nav">
<a href='#' onclick='document.getElementById("nav").style.marginTop="25px";'>test</a>
</div>

Answer 2

It has to be marginTop, because you are not setting a CSS property in a CSS file. You are setting the marginTop property of the style object. - is an invalid character for an identifier.

Answer 3

If you are accessing the style property, then by the standard camel case applies. So if webkit supports smth like element.style["margin-top"] then it's a quirk. Remember that you are not dealing directly with CSS here, it's just an intermediate layer.

In short - marginTop is part of CSS2Properties interface but margin-top is not.

Some libraries tend to convert the property names automatically, i.e. Prototype that converts all hyphenized property names into their camel case forms, so you don't need to worry about it.