style.top and style.left not working

I had a similar problem and discovered that setting .top would not work until after I set the element to "position: absolute" .

Why is you class name missing the pascal casing for the element ID in the classId

#formatdialog {

FormatDialog

You have a typo.

The element id is formatdialog but you are trying to call FormatDialog

var elem = document.getElementById('FormatDialog');

Your code should be like this:

<div id="formatdialog">

</div> 

var elem = document.getElementById('formatdialog');
elem.style.top = "10%";
elem.style.left = "10%";
elem.style.width = "600px";
elem.style.height = "500px";

#formatdialog 
{
    left:25%;
    top:25%;
    width:400px;
    height:200px;
    position:absolute;
    z-index:100;
    padding:2px;
    font:10pt tahoma;
    border:1px solid gray;
    background-color:orange;
}​

If you want to use Pascal casing make sure it is the same in elementId and class

Check this Fiddle