I have an iFrame that uses a background image on behind it. On Firefox, the background is transparent and I can see the background image. On IE the background in the Iframe defaults to white. Is there a fix for this?
Example:
<td width="80px" class="voting" align="center"><div id="votingIframeDiv">
<iframe id="votingIframe" frameborder="0" allowTransparency="true" vspace="0" hspace="0" marginwidth="0" marginheight="0" width="80" height="70" scrolling="no" src="vote/index.php?userid=89&fishid=<?php echo $row['id'];?>" >
</iframe></div>
</td>
Is there a fix for this?
Yes, IE has the non-standard allowtransparency property.
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true">
</IFRAME>
Be sure both the IFRAME and its source BODY element have a background:transparent style rule applied:
<iframe id="votingIframe" frameborder="0" allowTransparency="true" style="background:transparent" ... ></iframe>
and in the source:
<body style="background:transparent">
PS: CSS styles above are inline just for example.
Yes you can fix this but it also depends upon the iframe's origin's style sheets, If the iframe's source has a bg set in CSS this will override allowTransparency="true"
This may be a long shot but try putting allowTransparency="true" at the end of the iframe tag.
Note: In my testing allowTransparency has not worked in IE6.
After putting allowTransparency='true' if you're not getting any love try making sure that your style="background:transparent" .
Related
I am using a vimeo video as a background for a div that spans the top of my page. When I have the cursor inside of that div/iframe it won't scroll the page at all. The embed code I'm using:
<div class="vimeo-wrapper" style="padding:42.75% 0 0 0;"><iframe
src="https://player.vimeo.com/video/288403366?
autoplay=1&loop=1&title=0&byline=0&portrait=0&background=1"
style="position:absolute;top:-10px;left:0;width:100%;height:100%;"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
allow="autoplay; fullscreen"></iframe></div>
I've tried putting overflow on both the iframe and the vimeo-wrapper div but neither seemd to help.
Solved by putting z-index: -1 on the vimeo-wrapper div
I am not a coder by any means, I have very very little training and get by only with what I can pick up online. With that said, I apologize if this is a dumb question! I am a photographer who makes these slideshows for clients when their images are ready and I am having an issue getting them to center (horizontally) on whatever the page it is being displayed on. In my viewing galleries there are several different page widths, so even if I center manually using (i.e.: left 95px) or whatever it is for that page it obviously won't work on a different page with different site width. I am sure there is an easy universal command I can add to all of these slideshows that will make them center on every page but I can't figure it out -- any help would be greatly appreciated! Here is the code I am working with...
<style>
.ss-embed-container-89670 {
position:relative; padding-bottom:680px;
height:0; overflow:hidden; max-width:1020px} .ss-embed-container-89670
iframe {position:absolute; top:0;left:0; width:100%!important;
height:100%!important;
}
</style>
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
you could try to do something like this:
<div style="margin: 0 auto;">
<div class="ss-embed-container-89670"><iframe src="https://greg-
ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
I have a form from Google docs that I embedded in my website I want the students I coach to fill out but the scrollbar is annoying me. Any way to get rid of it?
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
use scrolling="no"
<iframe src="https://docs.google.com/forms/d/1kMdmk_f4jrAWwZi6q3YD63oUQAg2hvdheAQ-pY_2FRY/viewform?embedded=true" width="760" **scrolling="no"** height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
I'm not sure if it's the single scroll bar, or the double scroll bar that's annoying you...depending on the form you're embedding, some sections may be larger than others and they'll need to scroll to continue the form.
I'm very noob here, but fixed a naggy double scroll bar issue for a wix site using their html embed tool...
Taking the google form embedding code, I added the "style" sheet at the beginning and changed height and width to "100%" see here:
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<iframe src="YOUR SOURCE" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
I have found if you change the height of your form to say 2000 your form fits on your website without the scroll
e.g. width="650" height="2000"
You can try css: overflow-y: hidden;
I have an iframe, but I dont like the default, "dented" into the page look. How can I change this so that it appears at the same level as the surrounding page and blends right in?
Or you can use the frameborder attribute.
<iframe src="..." frameborder="0">
You can use CSS:
IFRAME { border:0px; }
I've embedded a Google map onto my website in an iframe:
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905" width="614" height="244" scrolling="no"></iframe>
This is invalid, and I need to somehow pull off the scrolling aspect in CSS. How would I do this?
<iframe style="overflow:hidden;"></iframe>
Late response
The only solution I found so far is setting overflow to hidden and set width, height to a parent div.
In your case:
<div style="width:614px; height:244px;">
<iframe src="http://www.map-generator.net/extmap.php?name=Spot&address=los%20angeles%2C%20ca&width=614&height=244&maptype=map&zoom=14&hl=en&t=1298011905"width="614" height="244" style="overflow:hidden; width:614px; height:244px;"></iframe>
</div>
I have found another solution which worked.
<iframe src="...." class="frame-abc" scrolling='no' ></iframe>
.frame-abc {
border:none;
overflow:hidden;
margin:0;
height:230px;
width:570px;
}