title: style.top and style.left not working
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>css:</p>
  
  <pre><code>#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
          }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function FormatDialogResize(){
          var elem = document.getElementById('FormatDialog');
          elem.style.top = "10%";
          elem.style.left = "10%";            
          elem.style.width = "600px";
          elem.style.height = "500px";
      }
  </code></pre>
  
  <p>I also tried:</p>
  
  <pre><code>function FormatDialogResize(){
          var elem = document.getElementById('FormatDialog');
          elem.style.top = 10+"%";
          elem.style.left = 10+"%";           
          elem.style.width = "600px";
          elem.style.height = "500px";
      }
  </code></pre>
  
  <p>Thanks.</p>