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.
Related
In this simple jsbin example, I have code that looks like this:
<style>
div {
content-visibility: auto;
contain-intrinsic-height: auto 10px;
}
</style>
<div>a<br>a<br>a</div>
<div>a<br>a<br>a</div>
<div>a<br>a<br>a</div>
...
I've set the height to 10px, but the actual heights of the divs are larger.
I'd assumed that this would mean that there is weird scrollbar resizing as the user scrolls down the page, but not when they scroll back up - since the browser has already discovered and remembered the heights of the elements that are being scrolled past on the way back up.
However, that doesn't appear to be the case. In Chrome (v100) there is scrollbar resizing on the way down and up, just as if I had not added the auto option.
The auto value is mentioned here, and they only mention Chrome support for contain-intrinsic-size auto, rather than the individual height and width options, but the size version doesn't work either. So I assume they just mentioned contain-intrinsic-size as a catch-all.
Turns out that this was a Chromium bug that will be fixed in Chrome v102: https://bugs.chromium.org/p/chromium/issues/detail?id=1318726#c4
Sorry for the terrible title, but I couldn't describe my issue succinctly enough.
I'm noticing a weird behaviour having to do with the scrollbars.
I have a fixed menu on the left side of my web page. The menu is scrollable if the number of options inside are several.
JSFiddle example
When you scroll the menu, the scroll bar appears and is superimposed over the content. I'm okay with that... IF that's the case every time!
It used to be that the style:
overflow-y: scroll
would force a vertical scroll bar to be visible all the time and taking up its own space as part of the containing div's width. So what I ended up doing is having a fixed-sized outer div and then an inner div that's just 15px wider to hide the scroll bar.
#outer {
width: 200px;
overflow: hidden;
}
#inner {
width: 215px;
overflow-y: scroll;
}
But this behaviour doesn't seem to be consistent. At work, with the above styles, everything shows up just fine. The buttons sit at the right edge and do no get cut off on the right. But when I get home, or just am working elsewhere, the scrollbar does that hover-over thing, and now the buttons are extending off the edge and partially hidden.
I thought it might have been a cross-browser issue at first, but it's not. Has anyone met with this problem? Thanks!
P.S. - Before anyone mentions some 3rd-party menu/sidebar code. That's a no go. I have tried some, but because of work-specific requirements, I figured it's easier for me to write this myself rather than fight any quirks that disagree with our needs.
My page layout looks something like this:
<style type="text/css">
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="content-wrap">
</div>
You'll notice that the content-wrap div shifts its position a tad bit when the vertical scrollbar appears. One scenario is when the browser starts to progressively render the page without displaying the vertical scrollbar, then determines that a scrollbar is needed because the content is taller than the "fold". This shifts the div about 10px towards left.
What is the best way to tackle this problem without forcing the browser to always display the scrollbar?
I'm afraid the best way to solve this is to force the scroll bar to be visible at all times with html {overflow-y: scroll;}. The problem you have is that the "available area" shrinks with say 10 px when the scroll bar appear. This cause the calculated margin on your left side to shrink with half the width of the scroll bar, thus shifting the centered content somewhat to the left.
A possible solution might be to calculate the margin with JavaScript instead of using margin: 0 auto; and somehow compensate for the "lost" pixels when the scroll bar appear, but I'm afraid it will be messy and the content will probably move a little bit anyway while you calculate and apply the new margin.
If your site is "responsive" (reacts to width):
Step 1: Add width: 100vw to a wrapper element. This makes it as wide as the viewport, ignoring the appearance of a scrollbar.
Step 2: Add overflow-x: hidden to the content element. This will remove the horizontal scrollbar (created when vertical scrollbar appears, to allow the user to "look under" it).
"wrapper element" is in our case referring to another div around your #content-wrap
Will work for your case too, tested:
<style type="text/css">
body {
overflow-x: hidden;
}
#wrap-wrap {
width: 100vw;
}
#content-wrap
{
margin: 0 auto;
width: 800px;
}
</style>
<div id="wrap-wrap">
<div id="content-wrap">
</div>
</div>
Make sure nothing useful on your page is wide enough to get caught under the scrollbar.
For example, you can ensure that the sum of (horizontal padding + border + horizontal margin) of the content element is wider than the scrollbar).
If your site is fixed width + centered (your case):
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
This will add a left margin equal in width to the scrollbar when it appears. Which is 0 when it does not. Taken from here, but tested.
You must use:
html {
overflow-y: overlay;
}
Only supported by WebKit (Safari) or Blink (Chrome, Opera)
Use jquery and put this in the start of your tag:
<script type="text/javascript">
function checkheight(){
if ($(document).height() > $(window).height()) {
//that is if there is vertical scrollbar
document.getElementById('yourcenteredcontainer').style.paddingLeft='8px';
//8px because the scrollbars are (?always?) 16px
}else{
document.getElementById('yourcenteredcontainer').style.paddingLeft='0px';
}
}
</script>
and call the function checkheight(); in the end of your tag plus wherever you have onclick (or other) events that make the page longer or shorter in height.
If you can use Javascript, you can set the width of the content-wrap to the inner width of the window minus the standard width of a scrollbar.
You will run into some problems though.
The user will have to have Javascript enabled
You don't know what the width of the vertical scrollbar is, especially if the scrollbar isn't there! So you will have to guess. 20px seems like a good guess.
Different browsers have different ways of telling you want the inner width of the window is.
So if you can live with all that, you can do something like this (in pseudo code)
if window.innerWidth is defined :
set the width of the div to window.innerWidth-20px
else if we're running on Internet Explorer :
set the width to document.documentElement.offsetWidth-20px
otherwise :
we're out of luck and we best leave the width as is.
First I would recommend optimizing the HTML so that it won't take so long to load/render. If load/render is fast the scrollbar won't appear "too late". What is it that takes long to load/render? Check the network tab in chrome debug tools (F12). Do an audit in Chrome debug tools.
There are multiple things that could make the document "reflow", and the scrollbar appear even though the browser could have known the necessary measurements right from the start. Are you using tables for layout - don't! They may need multiple passes of rendering. Do you have images without width/height specified? Then the document will need to be rerendered when each image loads. Specify <img ... style="width: ..px; height: ..px">. Is the CSS sane and efficient?
If you can't get load/rendering speed down I think your best bet is to not use the browser's scrollbar if javascript is enabled. That way you can control it and place it absolutely positioned so that it won't affect horizontal positioning.
Let your slider start of with display: none. Monitor dom ready event as well as image load events as well as window resize events. When the page has been loaded, images have been loaded and when window gets resized just run the same function every time. It would determine if the scrollbar is needed and either display it or hide it.
You could use JQuery UI Slider for example and set it's maxValue to $(document).height() - $(window).height(), monitor the slider change event and then scroll the body to the value of the slider and so forth.
If javascript is disabled the fallback will be the regular scrollbar and there's nothing you can do about the slight horizontal shift then.
But really I think the problem of the horizontal shift is too small to spend time fixing with a custom scrollbar, and check that it actually works well on all platforms etc. Do HTML/CSS optimizations first.
You can try this solution: https://stackoverflow.com/a/67213174/14302216
But the widths can't be relative. Probably, width:100vw will work for the parent, but I'm not sure how you would set the child width. I'm afraid calc(100vw-16px) will not work. But if you can set like widht:800px for the child, it will be fine!
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/
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }