So I need to create a website that has an iframe, navigation and logo.
So the iframe's src is an html file, that html file contains a panorama which is a flash video. So I used z-index so that the iframe is below my div that contains the nav and logo. It works on Chrome, Firefox, Safari if I'm using a Mac. Then I tried testing the website on a windows computer and the website renders perfectly on Chrome only. Firefox, Safari,and IE position the div below the iframe (thus making my whole div not visible)
I did my research. Apparently flash videos are not affected by the z-index value? And I can't try to change the flash's wmode cos it's on a third party.
Any solution to this? Thank you.
Build div container for your iframe and give it the z-index.
HTML
<div id="iframe">
<iframe src="#">
</div>
CSS
#iframe { z-index: 10000; }
Related
Safari-specific:
I have got a page which is simply a background with an iframe centered in it. The iframe uses transform animations on :hover, and these cause the iframe content to make a little unwanted 1-pixel shift to the left only in Safari (tested in Chrome & Firefox).
I'm not sure what might be causing Safari to do this.
My iframe is width: 100%, so presumably the frame itself isn't
shifting, only the content.
The shift only lasts for the duration of the animation, not the hover.
The shift doesn't occur on the page that is the source of the iframe content, only once it is displayedcwithin the iframe.
Has anyone encountered this issue in Safari?
Page with Safari issue: http://www.bladesnpc.com/index-02.html
Content within iframe: https://perchance.org/blades-npc
I am managing the element centering with flex. Changing the flex-direction to column solved the Safari problem—although this particular fix only works because I am centering a single element on the page.
I have a page with fixed header and footer using Bootstrap3. The content beneath is scrollable. The user may enable the fullscreen mode via F11 or a button (using the FullScreen-API). This works fine in Chrome and FF but has problems in IE11. Fullscreen with F11 works always fine. But toggling fullscreen mode with javascript causes my page to be placed at the top bottom with shrinked width and height when using IE11. My header and footer remain intact.
<body>
<header>Fixed</header>
<main>Scrollable</main>
<footer>Fixed</footer>
</body>
I have created a small fiddle, that may show what I'm doing. Unfortunately the fullscreen wont be toggled in JSFiddle, so better copy the code to somewhere else: https://jsfiddle.net/j122kdju/
Here are two screenshots from the site. I gave the html a green backgound color to see what's happening when enabling fullscreen via JS API. First image shows the page without fullscreen in IE11:
The second shows fullscreen enabled via JS API in IE11:
I may handle this issue by setting html width in css to 100%. Anyway, pages with overflow can't be scrolled anymore. The scrollbar is not visible. As said, this works fine in other browsers.
Is there any workaround available? Am I missing something here? Thanks
EDIT: Maybe related: IE cannot scroll while in fullscreen mode
if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox
see my complete answer here:
IE cannot scroll while in fullscreen mode
You can try to set html width to 100% as you said and then force the body to have a scrollbar using
body {
overflow-y: scroll;
}
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
My code:
html
{
background-image:url('img.png');
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}
This works perfectly on Firefox and Chrome, but on IE the image doesn't get stretched at all. It will work if I set background-attachment to "fixed" but that isn't what I want.
Every website I've looked at claims that these proprties are perfectly implement in IE, but they clearly aren't.
Troubleshoot CSS Background Size Cover
It's a bit hard to troubleshoot without seeing additional code or the website, but here are some things you can try.
Try adding background-attachment:scroll; instead of leaving it blank
Is your doctype correct, or does it have typos?
Are there other scripts or styles on the HTML tag that may be interfering/overwriting the background style?
Hit F12 to open Developer Tools, and click on the HTML tag to see what styles are listed. Toggling the CSS styles on an off for key elements on your site can help you troubleshoot the problem.
If you are in IE Developer Tools, check to see if "Document Mode" and/or "Browser Mode" are set to an older browser. (IE6, IE7 and IE8 don't recognize background-size:cover, and will show the background in its original size - Can I Use support table.)
Is your background only filling the browser window, and not expanding to cover the document page/scrollable areas? Try adding height:100%, width:100%, margin:0 and padding:0 to your HTML and BODY tags. (The default HTML and BODY tags have different styles. The HTML size is controlled by the browser window, while the BODY will wrap around the contents, regardless if the contents are less than the browser window, or expands past it.) Also try switching the background to the BODY, or the wrapper tag.
To help troubleshoot, make a basic test page with the HTML, BODY and wrapper tag only (if you use a wrapper), and see if you can get the background to function properly. This will help you narrow down the bug. Your wrapper may need a height and width too. Depending on your wireframe (DIV or CSS Table, HTML Table), it may need: min-height:100% and min-width:100%, or height:100% and width:100%.
I created a simple html page with the css you provided, did not include a background-attachment, and used <!DOCTYPE html> as the doctype. The background worked well and fully covered the screen as expected in Windows Vista/IE9, Windows 7/IE10 and Windows 8/IE11.
Side Note: Full background Stack Overflow solution for IE7 and IE8
In Internet Explorer the background of the webpage moves without the rest of the page's content, I need the background to be fixed with the content, so when I resize it the background doesn't move, like the content inside it, here is the link to the website:
Website Link
This error only appears in Internet Explorer. I have an internet explorer-only stylesheet you can view in the source of the website.
I believe instead of (or in addition to) position: fixed, you can use
background-attachment: fixed;
Hope that helps.