I am using an "emailmeform" in an iframe for a contacts page and the background won't go transparent. I have added allowtransparency="true" to the iframe and it's doing nothing.
I know I should add <body style="background:transparent"> into the source to make this normally work but I have the exact same iframe on another page and the transparency works, but trying it on this new page with the same code for some reason doesn't work.
Here's the bog standard iframe code, I just can't see what's going wrong.
<iframe width="100%" height="600" allowtransparency="true" frameborder="0" scrolling="no" style="border:none" src="http://www.emailmeform.com/builder/embed/Mnc79QelZ4v8r">
</iframe>
allowtransparency is NOT in <iframe> specification, thus it is doing nothing. This keyword support is removed since IE9.
background: transparent is doing nothing either. It depends on how browser renders this transparency. In short, avoid using transparent background.
The transparent keyword maps to rgb(0,0,0).
Sidenote: However, similar parameter exists in XUL, but this does not apply to your case.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
Related
I would like to place a static image on top of the YouTube Video Player; however, it appears as if they somehow block this from occurring?
So far I have tried setting the z-index higher than the YouTube player but this does not work.
For example:
<img src="../example.png"/ width="100" height="100" class="image" />
<iframe width="420" height="315" src="http://www.youtube.com/embed/k6U-i4gXkLM" frameborder="0" allowfullscreen></iframe>
.image { position: absolute; z-index: 10000; }
Your code works perfectly. Just the slash after "../example.png" is unnecessary but it will work anyway.
You should be able to add wmode=transparent to the youtube iframe url. See:
Youtube iframe wmode issue
A working example:
http://www.parentmap.local/article/webinar-parents-guide-to-college-admissions
Notice how the flyout menu overlaps the video iframe.
If that won't work for some reason, you could load the youtube preview image using javascript, then put your overlay on top of that. Only load the real iframe when someone actually clicks the element.
Quick googling finds this on youtube images:
http://www.reelseo.com/youtube-thumbnail-image/
Example from that page of preview image URL:
http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg
Hello Everyone and Good Morning,
I am working with the page:
http://702wedding.com/live/
And it works in ALL my browsers Execpt IE. I dont have IE so I am kinda flying in the dark as far as fixing it. My boss is saying something about the iframe border showing in IE and w/e else any of you IE'ers can see. Also the font on the index page BEHIND the modal is showing tiny font.
I am on a mac and desprately need a way to see IE in the future, BUT can anyone help me fix this this morning?
Problems:
iFrame Showing in IE
Tiny Font behing Modal in Index Page.
Thank You all very much, as always.
^_^
I see the frame border in IE7. Try setting border: 0 and background: transparent in your styles for the iframe. Then add allowtransparency="true" as an attribute to the iframe.
Instead of border:none, try setting the border to an explicit value:
style="border:0px solid #fff; overflow:hidden; width:100px; height:21px;"
Also, try setting the display selector to block.
I have this style on an iFrame, and the border does not display in IE:
style="border:0px solid #FFF; display:block; left:0; top:0px; height:100%; width:100%;
Also, you have an extra comment in your Javascript, causing an error:
$(".example5").colorbox({innerWidth:686, innerHeight:624 ->,<- }
If you don't have any browser try https://browserlab.adobe.com/en-us/index.html.
you can get a preview of your link in set of defined browser (almost all ).
set your border="0" and frameborder="0" on the iframetag
The page is at least functional in IE6:
Note that the nav at the top of that dialog is broken. IE6 doesn't listen when you tell it a frame has no CSS "border" - you have to explicitly tell it it has no frameborder, so use border="0" frameborder="0" on the iframe tag.
Behind the modal dialog, the text isn't "tiny" - in fact, it's rendered similar to how FF renders it (though, it's IE6, so the text is hard to read/aliased, of course)
And, for future reference, you can use BrowserShots to get screenshots of the page in a variety of different browsers/versions, including IE[4-9], last time I checked.
Otherwise, you could look into IEs4Linux which'll let you run IE6 and 7 on Linux, provided you have a valid Windows license.
i have an iframe nested inside another iframe, and for both iframes i have these attributes:
frameBorder="0" marginWidth="0" marginHeight="0" scrolling="no"
Ive also tried:
style="border: 0px; margin: 0px; padding: 0px;"
It seems that no matter what I try, the border of the inner iframe keeps showing, as well as the padding within the inner iframe. This is also only the case for IE (v. 8), for firefox it works fine and shows no borders.
Is there any way to get rid of this?
Capitalize the letter B in "frameborder"
<frameBorder="0" ... >
It's an IE thing...
use frameborder="0" attribute:
<iframe frameborder="0" src="..." />
Unfortunately, do not know, how to set this using CSS.
I've spent so much time busting my head over this one :)
If you have not defined any values for the DIV in which your IFRAME is located, a border appears by default. I usually put my IFRAMEs in the body section of a separate HTML file. I add this line of code in my CSS file and boom! Problem solved.
body {
padding:0;
margin:0;
}
I want to remove the horizontal scrollbar in my iframe. I just need a vertical scrollbar to view the lengthy contents. My code is
<iframe height='514' width='790'
marginwidth='0' marginheight='0'
frameborder='0'
overflow-y='scroll'
overflow-x='hidden'>
</iframe>
Anyone please solve my problem. Advance Wishes.
In the iframe page itself, add this:
body {
overflow-x:hidden;
height:100%; //optional, but it can't hurt.
}
If you are using a browser that supports CSS3 you could use the overflow-x property.
#my-iframe
{
overflow-x:hidden;
}
Here is an IFrame-resize script.
However, if you use SSL then there is no way to use a script to communicate between the frame and the main window. It will give an "access denied". :-(
Try setting scrolling attribute to "no"
<iframe scrolling="no" ..............> </iframe>
The solution is:
style="overflow-x:hidden;
overflow-y:scroll;
in tag <body> of page included on iframe
SEE THIS LINK PAGE
Regards by Raffaele.
I have a legacy website using frames. The pages within the frame do not use a white background and hence, I get an annoying "white flash" while the pages in the frames transition. I think this can be fixed by changing the background color of the <frame>, but no matter what is entered, Internet Explorer will NOT see anything but white. Firefox appears to accept the background color, but not so with IE.
NOTE: please don't flame me on using frames -- I know; heck, I think I've even preached it a time or too ... lol...
I found this, rather obscure, piece of information;
Notice the **AllowTransparency** attribute -- That did the trick -- now, the RightBackground class can set the color as expected. Without the attribute, the color stays white (#ffffff), regardless.
Reference can be found here: http://www.blooberry.com/indexdot/html/tagpages/f/frame.htm
<frame allowTransparency="true" class="RightBackground" src="BottomRight.asp" marginheight="0" marginwidth="10px" name="BottomRight" />
Just FYI, the contents of RightBackground just sets the background color:
<style type="text/css">
.RightBackground
{
background-color: #EAF4D9;
}
</style>