I have a script in the link below which works in IE8 nicely. However, it seems to go wrong a little in IE7.
In IE7, I end up getting a bottom scroll bar with the text in the 2nd column behind the vertical scrollbar.
The text is supposed to move a little automatically to the left if a scrollbar is added because of the overflow:auto in the CSS.
How can I get this to work so it resizes properly without having the text go behind the vertical scrollbar?
Here is a jsfiddle of it in action:
http://jsfiddle.net/9vEdw/
The "easy-but-not-awesome" fix is to replace width: 100% with width: 280px on #tblData.
See: http://jsfiddle.net/9vEdw/3/
Related
I have problems with the bootstrap grid and a nested div with overflow-y.
Like mentioned in this stack overflow post, I tried to add a min-height:0
to the parent ancestor, but can't get it to run.
left Chrome, right: Firefox
In Chrome the layout is rendered okay (no browser scrollbar) and a scrollbar in the red area marked with the overflow-y: scroll.
In Firefox the layout isn't rendered okay (browser scrollbar is shown, no scrollbar in red area)
My goal is to have a 100% height webpage with a vertical splitted right column (25% | 75%) and a scrollbar in the red area in all browsers ;-)
I've put the sources to a codepen
Any suggestions, how to achieve the expected behaviour?
I've adjusted your code a little, please check out this fiddle.
Try adding height: 100vh; to .bg-secondary. Additionally I've moved the overflow-y: scroll to .bg-danger
And make sure you have imported all necessary bootstrap files, I've used bootstrap.min.js(v4.1.3), bootstrap.css (v4.1.3), popper.min.js (1.12.9), jquery-3.2.1.slim.min.js
I recently created a webpage for a company at http://www.parkprivatewealth.com/park and everything looked fine on Chrome. However, when using Safari to view the page, the homepage heading gets cut off when using fixed position. The text is there when I try to scroll up more and seems like something is blocking the text.
When I take off the "position: fixed" tag in the CSS the words appear again, would anyone possibly know how to solve the problem?
The problem: When the header changes to a fixed position, it gets pulled out of the document flow and the .container element pushes upward. Since you didn't use top, left, etc., the h1 element moves upward with .container
The solution: Add padding-top to the .container element. It should be the same as the header height.
Anybody's got ideas, how to get around the problem that scrolling horizontally clears div background colors/images.
There's a similar problem example for example on www.f-i.com.
If the browser window is small enough to display horizontal scolling and then you scroll to right the content gets hidden (probably the background color of the divs get replaced by body background color... or something)
This happens at least with current versions of Mac Chrome and Safari.
I'm using 960.gs if it has anything to do with that..
Thanks in advance,
Harry S
On the www.f-i.com site, if you look carefully the div.main has overflow: hidden;
If you remove this it all works fine.
I'm working to build a CSS layout that has a fixed header, lefCol and Right Col, but the height of the MainCenterColumn (#mainCol) can scroll.
Here's what I have so far: http://jsfiddle.net/DscT6/
The issue with this is, on the mac you can scroll by dragging your fingers on the touchpad. I noticed that the scrolling only works if you mouse is over the MailCol, if your mouse is over the Left or Right Col the page doesn't scroll. Any ideas? Have you seen this? Suggestions? thanks!
Here http://jsfiddle.net/laukstein/DscT6/3/ it works fine.
I agree with polarblau, if you add overflow: auto that element will automatically have the scroll as needed, if you remove the overflow rule the entire page will have the height of the highest element and so it will scroll.
I am fixing bugs for IE7 and this one has me stumped. The content in this page is larger than its containing div. IE7 is properly displaying a vertical scroll bar but the content is getting on top of the vertical scroll bar and when the user clicks the scroll button the content doesn't move. I can't imagine what is causing this. Any Ideas?
EDIT: I Have attached a screenshot of the problem:
alt text http://img31.imageshack.us/img31/605/picture5kw.png
I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:
#content_box {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;
this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).
I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)
IE7 scroll issue
Apply position: relative to container having the property overflow-y:auto;
e.g.
#content_box{
position: relative;
overflow-y:auto;
}
Above solution works for me.
Is it possible to set the width of .grey_box to hard-coded 510px? Because it looks like IE7 is the only one who gets this right, since #content_box is set to 530px with 10px padding, which would make all boxes inside 520px wide, and that is somewhere out into the scrollbar. Pekka might be into something as well, with IE7 and IE6 not implementing overflows correctly.