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.
Related
http://www.andrewsmorris.co.uk/blog/
I have a sidebar that slides out when you click the button on the left, the problem however, is that on iOS I get horizontal scroll bars on the page when I click it.
Which I don't when I click it on a desktop browser, because it adds a class with overflow:hidden to the body class.
In theory this should prevent the same unwanted horizontal scrolling on the iPhone too, but it doesn't for reasons i cannot work out.
I could apply overflow-x:hidden to the html element, but that seems to jump the page to the top regardless of where you are, which is unwanted behaviour.
You need to apply overflow:hidden; and position:relative; to both and and they also can't be display:table, display:block works. Specifying the height and width may help as well.
I don't know a solution that will enable you to use overflow: hidden; based on the information you are giving. I can however advise you to use iScroll for mobile scrolling!
Take a look at it on cubiq's website
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
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.
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!
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?