Menu
I'm banging my head on this one.
I have a disturbing horizontal scrollbar that appears only when browsing my site in IE7:
http://www.regia.it
I have tried and tried to stop this from happening by using overflow:hidden on my divs but for some reason I just can't seem to find what is causing the problem.
Any help is greatly appreciated.
419
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.
This does seem odd. I am assuming you don't mind if the page is not horizontally scrollable even on small screens, since you have tried to use:
body{overflow-x: hidden;}
In which case if you apply it to html rather than body it should do the trick:
html{overflow-x: hidden;}
I wouldn't really want to implement this long term, but if you are looking for a quick fix this should be ok as a temporary measure until you can work out what is going wrong. I would also put it in a conditional comment so as not to ruin the experience for the majority of people on modern browsers.
<!--[if IE 7]>
Link to alternate style sheet
OR
<style> /*CSS in here*/ </style>
<![endif]-->
EDIT : I have found the cause of the issue, so there is no need to use the above workaround. As I had suspected the issue was related to absolute and relative positioning.
You just need to remove position:relative from .grid_2 and .grid_12 and the scrollbar will disappear.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
