I'm encountering something I've never really come across before in IE7. I have a wrapper div with a background image applied to it. This image is supposed to repeat all the way until the end of the wrapper div. In IE7 there seems to be a scrolling issue where if I use the scroll bar to see parts of the page that aren't initially visible, the background image will 'cut off' and not repeat in the last 100px or so. This only happens if I have to scroll to see more content. It's like it doesn't fully load the background image for areas that aren't immediately visible.
What's strange is that if I use the mouse wheel to scroll up and down the page, the background image repeats just fine and as it should. If I use the scroll bar though, it will break randomly (never more than 100px but sometimes just the last 20px, 30, 40 etc).
I've tried the following to trouble shoot so far:
1) Added background color to the div as well. The background color breaks as well so it's not just a background image repeating issue.
2) Added a min-height of 1% to the wrapper div.
3) Added a position: relative to the div. I read somewhere that this fixes a weird IE7 background bug. This didn't help.
Thanks for any help. I'm unsure if there's some hiccup somewhere else in my code that is causing this (which I'll continue to look into) or if it's some well known IE7 issue. Again I just find it odd that using the scroll wheel on a mouse let's the background render as it should. Clicking, holding, and using the scroll bar causes it to break.
EDIT: Here is a link to a screenshot of the horrific problem in action. http://skitch.com/flight/dspeh/ie7bgerror
The top one is with the error. The bottom screen is how it should load.
Another additional thing I noticed: If I minimize the window while it has the broken background and then maximize it again the background image corrects itself.
My guess is that the 3 boxes at the bottom are floating div's. Try this:
#backgroundDiv { overflow:hidden; min-height:100%; height:auto!IMPORTANT; height:100%; }
IE6/7 sometimes bug with min-height. This piece of code will cause IE6/7 to default to 100%... IE sometimes likes to use the last declaration instead of following the !important call; whereas every other browser will use the !important call when displaying the page.
Related
I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.
I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:
Sidebar Closed (body scrollbar visible)
Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)
Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)
This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:
Before Hover (body scrollbar visible)
After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)
This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!
If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.
There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.
System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]
.MY_CSS_CLASS::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
This fixed my issue with ugly scrollbar being displayed when mouse is connected.
Specifying width to the body element will keep content width constant.
Here is the working example: https://jsfiddle.net/fuhacLtn/2/
First, you should pay attention to the rendering with other browsers and with chrome windows. As you know, the windows scroll bar is clearly not the same and is not rendered in the same way. You might have surprises with this.
Otherwise you maybe should pay attention to jQuery custom content scroller plugins.
This could actually helps you a bit more to control the scroll & the overflow and customize the scroll bar depending on the render you would like to give to it.
Good Luck'
I have a drop shadow (box-shadow) on my header element which runs 100% of the top of the page. I've added a CSS Pie to enable box-shadows in IE8 , but it seems like css pie has added a margin, or some spacing to the right of the header causing it to over flow and allowing the user to scroll to reveal empty margins.
I've tried setting overflow-x:hidden but that on the header, the child element and the parent and have also tried setting a position relative on the element but none of that actually works. Has any one else had this issue, and how were you able to resolve it?
I was able to resolve the issue. It's a bit embarrassing, and I swore I tried this fix before, but apparently now. It was quite a very simple fix.
I just set the styles of the body to overflow-x:hidden.
body {
overflow-x:hidden;
}
That simply removed the scroll bar and hid everything outside of the immediate browser window.
I cannot scroll to the bottom of a web page I am working on. My <body> is styled with overflow: auto (which I believe is just normal web page default behavior). My content is narrow and tall so a vertical scroll bar is necessary. However, when I scroll as far as the scrollbar will let me, the bottom approx 40px of my content is clipped out of the viewport and there's no way to scroll any farther. A screenshot is below (the black is just my desktop background). The box in the bottom right corner is the scroll bar itself, but there's no down arrow below if for some reason and it won't go any further. The rounded rectangle on the left is the top bit of a cancel button that is clipped. This problem occurs on a WebKit based browser on Windows, but does not happen on the Mac.
Here's my CSS situation: <body> has overflow auto and 0 padding 0 margin.
overflow: visible is the browsers default. I had to see more of your css to be able to help you, but, either way, try setting overflow to visible.
Though, I dont really think it will solve the issue. With overflow auto you should get a vertical scrollbar when the contents height is greater than the containing blocks height. That's not your case.
i had problem like this before, I removed position: fixed on my header and its worked. Hope that help someone
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!
In Firefox and Safari, pages that are centered move a few pixels when the page is long enough for the scrollbar to appear. If you navigate through a site that has long and short pages, the page seems to "jump" around.
IE7 tends to leave the scroll bar visible all of the time but disables it when the page is not long enough. Since the width of the HTML window never changes the centering of the page doesn't change.
Is there a workaround or a way to style the page so it doesn't jump around in Firefox and Safari?
Thanks.
You could simply always enable the scrollbar:
html{
overflow: scroll;
}
but that would give you the horizontal scrollbar too, this is better:
html{
overflow-y:scroll;
overflow-x:auto;
}
That will give you only the vertical scroll and the horizontal when needed.
This site contains a javascript to fix the problem which is a better solution IMO than the current one (a permanent scrollbar):
http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers
This script waits until the DOM is loaded then checks to see if a scrollbar is active. If it is, it calculates the width of the scrollbar and sets the body’s marginLeft equal to that width. This offsets the shift, and since it runs on DOM load it takes instant effect.