CODEWITHSUNDEEP
cssfirefoxwebkityui
Jaanus
Jaanus

Reputation: 17866

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

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?

Upvotes: 1

Views: 2023

Answers (3)

Andris
Andris

Reputation: 27875

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.

Upvotes: 3

Strelok
Strelok

Reputation: 51441

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.

Upvotes: 2

Robert
Robert

Reputation: 21388

This is working for me in firefox:

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

Upvotes: 2

Related Questions