Menu
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???
993
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>
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
