title: Why is Raphael.JS creating paper with dimensions 1000x1000?
body: <p>I have a demo using <a href="http://raphaeljs.com/index.html" rel="nofollow">raphael.js</a>. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below:</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Raphael Test&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      &lt;link href="../shared/img/favicon.png" rel="shortcut icon"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="graph"&gt;&lt;/div&gt;
      &lt;script src="../shared/js/raphael/raphael-min.js" type="text/javascript"&gt; &lt;/script&gt;
      &lt;script src="test.js" type="text/javascript"&gt; &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>/* Graph */
  #graph { padding: 5px; width: 477px; height: 299; }
  </code></pre>
  
  <p><em>JS</em></p>
  
  <pre><code>var holder = document.getElementById('graph')
    , width = holder.scrollWidth
    , height = Math.round(width * 0.5625) + 25
    , p = Raphael(10, 50, width, height)
    , c = p.circle(p.width - 50, p.height - 50, 50);
  alert(p.width + ' &amp; ' + p.height);
  </code></pre>
  
  <p>I found a discussion in <a href="http://groups.google.com/group/raphaeljs/browse_thread/thread/6a888369145a9212/820bbaf1a2ca67f0?lnk=gst&amp;q=internet+explorer#820bbaf1a2ca67f0" rel="nofollow">Raphael's Google group</a> with the same problem but no resolution.</p>