Html body style "padding-top" not working in Firefox

Question

Why when i'm doing:

document.body.style["padding-top"] =  panel.offsetHeight + "px";

the "padding-top" is not working in Firefox? It is ok in Chrome & IE , but FF - stab in the back.

The whole code is:

var fixTopPanel = function(){
  var panel = document.getElementById("TopPanel");
  document.body.style["padding-top"] =  panel.offsetHeight + "px";
}

window.addEventListener("load", fixTopPanel);
window.addEventListener("resize", fixTopPanel);

See it here: http://plnkr.co/edit/KyxxRV?p=preview

UPD: just figured out that style.paddingTop works but what is the problem with "padding-top"?

Answer 1

Use paddingTop like this : element.style.paddingTop.

var fixTopPanel = function(){
  var panel = document.getElementById("TopPanel");
  document.body.style.paddingTop =  panel.offsetHeight + "px";
}

window.addEventListener("load", fixTopPanel);
window.addEventListener("resize", fixTopPanel);