How can I remove extra margin from INSIDE an iframe?

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.)

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 very bad because our site is laid out very precisely and a slight variation of even one 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.

Here's my HTML:

<head>
    <body>
      <div id="mainImage">
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage1"
        src="http://www.youtube.com/embed/u1zgFlCw8Aw?wmode=transparent">
        IFRAMES do not work in your browser</iframe>
        <iframe scrolling="no" frameborder="0" runat="server" id="MainImage2"
        src="images/default/mainImage/mainImage_02.jpg">
        IFRAMES do not work in your browser</iframe>
      </div>
    </body>
</head

The CSS is as follows:

#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;}

This is the only code on the site that actively affects the way that the iframes display.

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???

Answers


It's the body of the Iframe content that controls this, not the Iframe itself.

Use a CSS reset on the Iframe pages (it won't hurt on the parent page either) and all will be well.


It seems like marginheight and marginwidth does the job, too. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe.

Often I use :

<iframe src="..."
 marginwidth="0"
 marginheight="0"
 hspace="0"
 vspace="0"
 frameborder="0"
 scrolling="no"></iframe>

Need Your Help

How to handle exceptions thrown while rendering a view in Spring MVC?

java spring spring-mvc freemarker

I have a Spring MVC application which uses FreeMarker as View technology (But maybe the view technology doesn't really matter for my question). I need to intercept all exceptions which may get thrown

How to send more arguments in C# backgroundworker progressed changed event

c# events backgroundworker

I understand how we can pass one variable(progresspercentage) to "progresschanged" function , like so.