I have a problem on making an iframe appear below absolutely positioned containers. This problem seems to be only on Google Chrome, while in IE 9, Firefox and Safari it's fine.
Code sample
<div id="cont_1" class="containers">
mixed content with images and text.
</div>
<div id="cont_2" class="containers">
mixed content with images and text.
</div>
<div id="cont_3" class="containers">
This one holds an iframe - An youtube video.
<iframe width="450" height="259" sr c="http://www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="cont_4" class="containers">
mixed content with images and text.
</div>
All these containers (slides) share similar CSS generated with JS.
#containers {
height: 398px;
width: 456px;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
margin: 0px;
position: absolute;
left: 184px; /* Successive ones have greater value. */
zIndex : 150; /* Every successive div has zIndex higher than the previous one. */
}
Every successive div has a zIndex greater than the previous one. So 150, 152, 154, 156.
The fourth container is set to always appear higher than the other elements. It does, but not when a youtube video is inserted to the third one. The video always stays above all the elements including the fourth one, which is supposed to be at the top.
I tried the following css for iFrame, both through stylesheet and JS.
.containers iframe {
position : relative;
z-index : -100;
}
But this does not help with Chrome 14, though it works on all other current browsers including Safari .
In case anyone want to know whats this is used for, it is sort of like stacks, which allows to view the slides with animation. Clicking next sends the top most item back, while its edges are still visible.
Any thoughts?
I think what you are looking for is a parameter on the end of your iframe source. Try using http://www.youtube.com/embed/VuNIsY6JdUw?wmode=opaque
Also, your CSS is using the id selector (#) instead of the class selector (.)
Related
I have a website that I am making for a friend, and on the mobile homepage, the footer is perfectly aligned. However, when you go over to either the pics or vids page, the footer is moved over to the left side. The css file can be found here. I have no idea why this is happening, and any help to understand why this is happening, and how to fix it would be great.
Just a quick note, to access the mobile version on desktop, use chrome, open up dev tools, and click on the phone icon in the top left of the dev tools pane. Set the width to 617, and the height to 1002.
Thanks!
Your content is overflowing from the pf-content class, making the page larger than 100% width that the footer is filling.
There are a range of ways to solve this:
Add overflow hidden to pf-content (Will look nasty on small screens)
Set a min width on the whole page body{ min-width: 1200px; }
Make the videos reactive, e.g. display inline blocks which will then wrap to a new line if the page is to small. (Could also be done with media queries used to scale the videos)
I would suggest making the page more responsive, and getting the videos to flow onto new lines if the page is too small to contain multiple. As a general rule tables aren't a great way to structure anything (other than an actual data table) you'd be much better off with a more flexible element. Though this will be more work on your part.
The width of the two iframes for video are set to 520px each which exceed the resolution you were testing on.
The iframes were placed in a table, with a fixed number of columns, causing an issue of overflow.
You can place the iframes in div instead, then change the way they are displayed in css. i.e. you can do a 2 column-like structure in the desktop.css if preferred and a responsive one in the mobile.css
<div class="video-container">
<iframe src="https://player.vimeo.com/video/146191500?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<div class="video-container">
<iframe src="https://player.vimeo.com/video/141281580?title=0&portrait=0" width="520" height="293" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
</style>
kinda new here
so I've been trying for the past 2hr to position an iframe and just couldnt get it right (or anywhere near that...)
my goal is to position an iframe of amazon just where "Hello, [name]" is written.
first I couldnt set an iframe because of their Same origin policy but I guess some pages aren't protected, like this one: http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending
positioning the iframe on my account information just seem impossible (tried margin-left, right, divs and everything)
my goal would be somewhat like this - http://i.stack.imgur.com/gQwyn.png
While I'm a little skeptical about what this is for, I'll provide an answer for it anyways.
So you can't exactly target the location of where your iframe's initial screen will show up at (as it will always default to the top left corner if I'm not mistaken) but you can move the iframe itself around.
Knowing that, it's possible to create an iframe effect over the iframe itself.
You'll have an iframe that will be large enough to capture the button at first glance (which 1260px wide and 300px high is good enough)
You will then move the iframe to position the button to where you would like it to show up in using an absolute position and the top and left style.
Then create a new div to contain that iframe and give it a width and height to what the button's size would be and then remove the ability to scroll with overflow: hidden; and remove the scrolling by stating it within the iframe tag scrolling="no".
You should then have the same results as below:
#my-div {
width: 128px;
height: 55px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -42px;
left: -884px;
width: 1260px;
height: 300px;
}
<div id="my-div">
<iframe src="http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" id="my-iframe" scrolling="no"></iframe>
</div>
Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.
The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.
That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.
In IE all content of the container is painted above the <a>, thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.
Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1, the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.
Note: there's a display: hidden; <span> in the <a>, but that's for internal use and I don't think it will affect this issue.
Note: the div.content__container has a parent from which it can get the 100% dimensions.
HTML:
<div class="content__container">
<p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
<span>text</span>
</div>
CSS:
.content__container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.content__container > *{
position: relative;
}
.__align-to-bottom {
position: absolute !important;
bottom: 0;
left: 0;
}
.__align-to-bottom.__right {
left: auto;
right: 0;
}
a.__link {
position: absolute !important;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
a.__link span{
display: none;
}
As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.
EDIT
As suggested I've created a fiddle. In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.
I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:
Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index
I take it your link is a block element and actually covers the 100% height and width too
Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.
Why not? Are block-level elements allowed inside inline-level elements in HTML5?
ps. Your fiddle code works in IE8.
On a site I'm working on I have a two divs. One is a div with content and an image, the content is in front of the image. The other div is a background image with a black gradient meant to overlap the former div - the image, but not the content. This works fine until the first site breakpoint. Also, it works perfectly on one page but not on another, which is really confusing since I can't see any difference between the two.
Working - http://www.osullivans-pubs.com/draft/?page_id=18
Not working - http://www.osullivans-pubs.com/draft/
I've also attached images of the method working, and not working (at the smaller width).
I'm kind of stumped at to what might be wrong. The element that should be in front has the .hero-unit class. Its zindex is higher than the background image div's.
<div class="controls">
<div class="button_circle_small right">></div>
<div class="button_circle_small left"><</div>
</div>
use the above code just before
<div id="back_gradient"></div>
you have to add a z-index in liquid-slider.css file below is the code...
.liquid-slider-wrapper {
margin: 0 auto;
clear: both;
overflow: auto;
position: relative;
width: 1110px !important;
z-index: 20;
}
I'm using the Google Charts API which renders charts using an <iframe>, however there's an large amount of white space on both the bottom and top parts which I'd like to remove. I've been attempting to do this in a variety of ways (explained below), but can't seem to get it to work out how I want it to;
My HTML markup
<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div
The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.
My CSS Styling
#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}
#chart-contents {
margin-top: -45px;
}
#chart-nav {
margin-top: 15px;
padding: 0px 15px;
}
The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it's still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.
However, this doesn't seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.
So far I've tried;
Use of negative top, padding-top and margin-top properties.
Positioning of absolute and relative in conjunction with top.
Using the clip property in conjunction with a relative position.
I'm starting to think that this is something that perhaps isn't possible without further elements or javascript?
Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!
If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google's API use of AJAX, it's rather difficult.
You could always place the previous element on top of your iframe so it looks like it's starting sooner than it actually is. This obviously works for an element coming after the iframe as well.
All you need to do to achieve this is to give the element position: relative.
Preview: http://jsfiddle.net/Wexcode/XyVGr/