Question

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.

Answer 1

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.