style.top and style.left not working

Question

I have a script written up that when a button is pressed, the formatdialog div gets resized. The problem is that I can't figure out why my javascript code does not work. I am able to resize the width and height, but for whatever reason, the top and left can't be adjusted.

It doesn't make sense to me what could be causing a problem. Firebug doesn't give me any errors. The javascript just resizes the width and height and ignores the top and left attributes. I am guessing that the css properties are causing a problem, I just don't know what.

css:

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

Javascript:

function FormatDialogResize(){
        var elem = document.getElementById('FormatDialog');
        elem.style.top = "10%";
        elem.style.left = "10%";            
        elem.style.width = "600px";
        elem.style.height = "500px";
    }

I also tried:

function FormatDialogResize(){
        var elem = document.getElementById('FormatDialog');
        elem.style.top = 10+"%";
        elem.style.left = 10+"%";           
        elem.style.width = "600px";
        elem.style.height = "500px";
    }

Thanks.

Answer 1

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

Answer 2

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