I am building a site and have a div with another div inside (lets call them div.container and div.contained). div.container is relatively positioned and div.contained has a fixed position. I want to use the overflow-y: scroll property to have the overflowing content in the container displayed within a defined height and scrollable. I found that this is a common issue in many versions of Internet Explorer along with an article that states the quickest way to fix the bug is to make the position of div.contained relative (http://code.tutsplus.com/tutorials/9-most-common-ie-bugs-and-how-to-fix-them--net-7764).
I tried this workaround but changing the position style of div.contained throws off the whole website. I tried looking through the forum and have found similar issues but no specific workaround for fixed elements, just relative ones. Does anyone have any advice on how to fix this ie bug for a fixed positioned div?
Related
I have the following html configuration
header div with a message div set to position fixed with high z-index.
bellow, content div with low z-index.
On scroll everything works perfect in IE11 on Windows 10. Problem is when overflow-y:auto is activated on the content div it will make the content above message.
Setting the message div with -ms-device-fixed instead of fixed will make the divs respect the z-indexes and remove the issue.
Why this is happening?
if you want to find why content penetrate look here:
https://msdn.microsoft.com/en-us/library/ms531188(v=vs.85).aspx
and about -ms-device-fixed property it seems that it just doesn't let content to be overflow in some way.
I havent found this exact question.
I have a page set up as
<div id="page">
<div id="chrome">
<div id="element">bla</div>
<div id="content">bla</div>
</div>
</div>
#page has position:absolute, and dimensions
#chrome has position:static, and overflow:auto
#element has position:absolute, right:0, top:0
#content has a large amount of content. it scrolls within #chrome, whereas #element stays fixed on the #page, without needing position:fixed.
http://jsfiddle.net/pike/x4kshd3f/
In some browsers - mainly windows i think - the #element overlaps the top of the scrollbar of the #chrome.
Is this correct behaviour ? Is there a way to make the scrollbar of the static #chrome appear on top of its absolutely positioned children ?
PS .. there is a reason why its structured like this. I cant use position:fixed. I cant put the scrollbars on #page. #chrome has to be static.
It actually happens on other browsers/platforms too, and yes, I'm afraid its intended behaviour.
Element with static positioning do not create a stacking context. the #element, which has position:absolute, has a stacking context. the effect is #element overlays #chrome, in a sense.
What seems to solve it in edge browsers is css
#chrome { isolation:isolate }
which is a css candidate from 2014-12. and a very sensible one.
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation
http://dev.w3.org/fxtf/compositing-1/#isolation
There are other ways to create a stacking context, but they all seem to interfere with the absolute positioning of #element, making it 'relative' to #chrome instead of #page (making it scroll along with the #content instead of staying fixed).
Still open for better supported solutions - I won't accept this answer.
I am experiencing an odd issue and am wondering if it's a bug in the rendering engines - it occurs in WebKit and also Firefox that I've tested.
If you have a div that's fixed on the page and you add another div inside it and also set it to be fixed (to obtain a fixed header within a fixed popup), you can ensure that the header will remain visible even when the user scrolls the popup. Unless you set transform scale on the popup - doing that will break position:fixed and cause it to no longer fix to the top of the parent div and instead it will scroll along with the content. Is that expected behavior - how can I work around that?
JSFiddle
Well the transform: scale(x) will break the element out of the coordinate flow and thereby can not have a fixed position.
I'd recommend instead wrapping the text below #header in a constrained div with overflow: auto. A fixed child of a fixed ancestor just doesn't make that much sense, but I can see what you were going for.
I have the weirdest issue that I haven't been able to find a solution for. I have a table where one of the cells has its contents wrapped in a relatively positioned div element (essentially I'm showing a "progress bar" in a cell, so its a div with another div inside (that expands its width to the % completed), and a span inside that showing the value).
The table is inside a div that has its overflow-y set to auto, and a max-height of 400px.
In FF, Chrome, and IE8 and 9 it looks/works great, but in IE7, the cells with those progress bar divs continue to show their content and don't ever scroll with the rest of the table contents.
This JSFiddle http://jsfiddle.net/ujV4M/1/ shows what I'm talking about if you view it in IE7.
Edited: Add position:relative to the element containing the table
I removed the relative position, as I've known IE7 to cause issues with scrollable content areas with regards to elements that aren't statically positioned, and I added margin-left to the text:
http://jsfiddle.net/3H6eG/
Obviously my solution avoids the issue rather than solves it, but it looks like it works as it should. Or do you need relative positioning for a specific reason?
Adam
The nav works the same in every browser i've tested on a mac and pc; however, I cant for the life of me figure out why in IE7 the nav is appearing under the content in the main content block. Check out http://obs4.dynapp.net/ to see the problem, it only exist in IE7. Check out the source if your interested in helping out with the problem. I dunno, I've spent hours staring at html/css and cant figure anything out.
http://obs4.dynapp.net/
This is a seriously annoying IE7 bug. It occurs because positioned elements later in the DOM will be given priority over those earlier in the DOM, regardless of z-index status.
This article will explain how to fix it: http://thedesignspace.net/MT2archives/000763.html
Basically, add position and z-index to the least common ancestor. So, if your header and content are both contained in a container, add position and z-index to that container. If they're direct children of the body, add it to the body.
Hope that helps.
z-indexing is weird with IE7. You have position: absolute for your nav. You have position: relative for your content. Yes, z-indexing should work where your position doesn't matter, but IE7 will take that into affect and give you two different "stacks" for z-indexes so absolute and relative positioned elements do not interact with each other. Try giving your nav a position: relative instead and then readjusting your css accordingly.