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.
Related
I am getting horizontal scroll on my HTML website layout all of a sudden and I cannot figure out how or why. Any tips?
This happens when an element's width is greater than the viewport width. This could be caused by text flowing outside of a container or another incorrectly sized element.
Good Fix
Use the inspector and start deleting elements one by one, eventually you'll delete an element that will remove the horizontal scroll. Note that you can CTRL-Z to undelete an element in the inspector. Once you've found the offending element you can inspect/adjust it's styles to fix the overflow.
Cheat Fix
Add overflow-x: hidden; styling to your body element.
This is not advisable though as it's not fixing the overflowing element, instead it's hiding the part that overflows.
Here's the codesandbox, as the code is too much to post here, given the nested elements.
I'd like to have:
a horizontal scroll for the .content div.
a vertical scroll just for the .group-body div.
I've tried everything and I can't get it to work.
This rule does make it "work", but I feel like it's not optimal.
.body{
height: 90vh;
}
You just need to specify max-height for .group-body and then overflow-y will work as expected.
See this fix in your code
This should solve your problem - https://codesandbox.io/s/divine-dawn-1n8b1.
It uses a flexbox instead of grid layout.
Note: The code in the link was fixed after a comment pointed out an issue. To fix the scrolling, I set the parent elements that contain the sidebar and the content to overflow:hidden, and set the parent element to overflow:auto, which allowed for the scroll bars to be contained in the content div.
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?
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'm having an issue with IE7. In IE6, Firefox and other browsers, the DIV containing the content stretches vertically depending on how much content is in it. In IE7 however, the DIV only stretches to the absolute minimum height of the page then it stops... it even cuts off the content inside of it.
I cannot figure out for the life of me why this is happening.
The DIV is .content and the example can be found here: http://beta.beanersfuncuts.com/?page=products. It also does this on other pages too with content too long.
I will continue looking for the source of the problem, but any extra help would be much appreciated.
Thank you!
The problem is that you have placed the content div inside the top_menu div. The content will extend outside the div, but in IE7 it will not affect the size of the table.
Removing the height specification on the top_menu div will make all the content visible in IE7, but that might have some unwanted side effects... You should mode the content out of the menu.
This might be the same issue, along with tweaks (a couple iterations, so scan the whole thread) to achieve the result you want:
Div Height:100% Messes Up In IE 7