title: How can I remove extra margin from INSIDE an iframe?
body: <p>I am currently developing a rotating montage of mixed media on a website. There are about 5 images/videos that will appear in rotation on the site. The site also uses the Ektron CMS, so there is no way that I can determine which slots in the montage will be images and which will be videos. (The videos are hosted on YouTube.)</p>
  
  <p>So, my problem is that the videos load perfectly aligned with the inside edge of the iframe, but the images load with a slight margin of about 10px INSIDE the iframe which is <em>very</em> bad because our site is laid out very precisely and a slight variation of even <b>one</b> pixel can mess it up. This only appears in FireFox and IE. I've tested in Chrome and Safari and it works perfectly. These 4 browsers are the only 4 that we officially support.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;head&gt;
      &lt;body&gt;
        &lt;div id="mainImage"&gt;
          &lt;iframe scrolling="no" frameborder="0" runat="server" id="MainImage1"
          src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent"&gt;
          IFRAMES do not work in your browser&lt;/iframe&gt;
          &lt;iframe scrolling="no" frameborder="0" runat="server" id="MainImage2"
          src="images/default/mainImage/mainImage_02.jpg"&gt;
          IFRAMES do not work in your browser&lt;/iframe&gt;
        &lt;/div&gt;
      &lt;/body&gt;
  &lt;/head
  </code></pre>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>#mainImage iframe{position:absolute; top:0; left: 0; padding:12px 0 0 12px; display:block;}
  #mainImage iframe html, body{ margin:0px; padding:0px; border:0px;}
  </code></pre>
  
  <p>This is the only code on the site that actively affects the way that the iframes display.</p>
  
  <p>So, my question is, how can I get rid of that margin inside the iframe and why does it only display in FireFox and IE???</p>