So when I add no frameborder 0 on this external source iframe, it is ONLY snapping correctly on Chrome. Edge, FF, and IE it looks like crap. I cant effect the css either. Any idea what I could do here?
Correct look on Chrome.
How it looks on every other browser.
Here is the iFrame
<iframe name="iframe" id="iframe" src="https://www.disprism.com/webar/login/" style="overflow:hidden;" allowTransparency="true" frameborder="0" scrolling="no" height="300"></iframe>
I'm not sure what you want here, can you be more precise? Your problem is the grey block on I.E right?
If my assumption is correct, then you should use "css borders" instead. Frameborder is not supported in HTML5.
Maybe try something like this https://codepen.io/Tryanium/pen/VRQjWK
#iframe{border: 0px;}
Source : https://www.w3schools.com/tags/att_iframe_frameborder.asp
EDIT :
I try on my computer on I.E
As you can see I don't have any grey block, can you show us the rest of your CSS?
Related
I have been trying to display PDF inside iFrame, it works well for all other browsers and platforms but not working with iOS. When I tried to access in chrome/Safari in iPhone/iPad, it shows the first page BUT does not allow to scroll down the PDF. And when it comes to HTML inside iFrame, it works perfectly, per my observation it looks like issue is with PDF inside iFrame on iOS. Tried all the links provided on various websites, overflow-auto, webkit scrolling, scrolling only y axis, position absolute/relative increasing the height which results in white pages and all other possible solutions, but no luck yet. The language of implementation is ASP.NET-C# where I am setting the iFrame source dynamically. Below is the source through which I am trying to achieve above task.
<div id="wrapper" class="Sales-container container">
<iframe runat="server" id="Contents" class="myiframe" scrolling="no" width="100%" height="100%" frameborder="0" />
</div>
.Sales-container{position:absolute !important;width:100%}
.container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px}
.myiframe{z-index:0;white-space:nowrap}
Any help would be much appreciated.
Thanks.
If you don't need https, you can use the google docs viewer
make the src http://docs.google.com/gview?url=YOURADDRESSHERE&embedded=true
If that won't work for you, I'm currently looking into pdf.js
I have been trying to add a javascript map to my wordpress site and for some reason the iframe is not respecting the height attribute I set.
I've tried it using < iframe > tags and even with a plug in short code. Both lines can be seen here:
<iframe src="https://www.shiftins.com/county/index.html" width="100%" height="900" scrolling="no"></iframe>
[iframe src="https://www.shiftins.com/county/index.html" width="100%" height="600"]
And can be viewed live on this page: https://www.shiftins.com/test-page-1/
I have iframes running on other parts of my site and they work properly. How can I fix this issue?
BTW I have tried !Important and still no luck.
On your live site the height of the iframe is set in the style with "height:150px" :
if you remove this from your css it will work like a charm :
A white bar appears bellow the footer of my Wordpress site. I try to see what it is with the Chrome developer tool and it looks like it is an iframe.
I don´t know how this happened but the problem was not there a few weeks ago. It does not happen on my chrome browser but when I try it in any other browser or PC I see the white bar.
The site is http://preposicionesdeplacer.com/
The white bar you're seeing on some browsers is the body of your page.
It changes along with the body if you test it.
I added the following attributes to #colophon and the effect disappears across all my browsers.
position:absolute;
width:100%;
Its normal because below your footer you have several iframes. This one as you can see bellow has the display element set to no.
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: no;"></iframe>
So just put this and normally it will hide this iframe too :
<iframe src="http://loadus.exelator.com/load//net.php?n=eJyVkmFLwzAQhv%2FKKK4f07Td5qbLirAO%2FLBvCoJIuSYxzWza0GS4%2FnuvdYIgAweBXN7k7rk3yVobNamkVpVnQRxMPrXw1Ri5jrOg8t7eRZHrG04M%2BMqDIrw1oxBhamZ8IU9asJhSugw7KXTHhqRp%2BjBNdjjqFoQh8iRr8G03JJ%2FFYTvd4cFtQmfTZKEwimmM0QEjinN5xMKv%2B33x%2FPy4fQs264G4Wf%2BrY24cgQbq3mvuSA9V246No55Z6HwjuwKr5y%2F5U36pMtQ452PncgseLrF0SUA0JzcClPTYdlNm582%2F%2FkcpyixD36FiNJ6FpWY36DE8MHqtTaKIaI9lLXmt%2BQdppI%2BsRlqm2lbVsmjQ5TddhmDs%2FVnm5vfK8euwIIg7WeIM3iRy7Ygd%2FkTmeysZfoNQOHsc3i8BWK3SZUrn5ewdYElXlM6TBZeLW1qKZP4D%2FgKO89UZ&h=75343745526d1625180b3cc2f82b37c2&ver=2" width="0" height="0" frameborder="0" style="display: none;"></iframe>
Tell me if that worked well for you, as for me it hides the iframe
I have a site, with an embeded vimeo iframe. The page flickers when it loads, even more so in Chrome, and then again on your initial hover over the video. I was wondering if the iframe could be causing this. I fI remove it doesn't happen. If I leave and remove my javascripts it still happens. So I'm wondering if anyone has had experience with this.
this is the iframe code
<iframe src="http://player.vimeo.com/video/85534169?byline=0&portrait=0" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
thanks
the site is currently live http://www.miltonkarate.com
Got the same problem : iframe with html5 video into another iframe cause the page flickering. only in chrome, others browser works well.
Remove your frameset in your website to fix the problem :
http://bokushucom.ipage.com/Miltonkarate/
this works well without clicking
Here is my code
<div id="sw" style="cursor:pointer" >
<object id="swfobj" type="application/x-shockwave-flash">
</object>
And JavaScript part
function openfile(filePath) {
$("#swfobj").attr("data", filePath);
$("#swfobj").show();
};
I test it in Chrome and Firefox... In Chrome it shows swf when I change data of object(Chrome change it after second click and it problem too, but it show swf wxcept Firefox :D)
In Firefox, I can't see swf anyway... I tried to manually change data, but it doesn't help top... Need your help u suggestions))))
Set the width and height to 1px each, then set the size to the proper flash size. My guess is that the swf is hidden by default. Hidden swfs won't load in some browsers.