Geek Answers Handbook

How can I remove extra stock from an INSIDE iframe?

I am currently developing a rotatable mixed media installation on a website. About 5 images / videos that appear in rotation on the site. The site also uses Ektron CMS, so I can not determine which slots in the installation will be images and which will be video. (The videos are posted on YouTube.)

So, my problem is that the video upload is fully aligned with the inner edge of the iframe, but the images are uploaded with a small margin of about 10 pixels of the INTERNAL iframe, which is very bad because our site is laid out very accurately and a small change in even one pixel can ruin his. This only appears in FireFox and IE. I tested in Chrome and Safari and it works great. These 4 browsers are the only 4 that we officially support.

Here is 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

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 display of iframes.

So my question is: how can I get rid of this field inside the iframe and why is it displayed only in FireFox and IE ???

+8
html firefox internet-explorer iframe
source share
2 answers

This is the body of the Iframe content that controls this, not the Iframe itself.

Use CSS reset on Iframe pages (this will not hurt on the parent page) and everything will be fine.

+3
source share

It seems that marginheight and marginwidth also do the job. 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>
+17
source share

More articles:


All Articles