CODEWITHSUNDEEP
cssinternet-explorer-7horizontal-scrolling
Milksamsa
Milksamsa

Reputation: 319

Horizontal scrollbar appears only in IE7 even with overflow:hidden being set

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.

Upvotes: 5

Views: 13163

Answers (2)

Michael
Michael

Reputation: 173

I came across this vexing issue too. I had a table in a div, and these were inside an outer div. When I removed the style to make the inner div width:100%, my 'IE7 only' scrollbar situation disappeared.

Hopefully that is somewhat helpful.

Upvotes: 1

tw16
tw16

Reputation: 29575

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.

Upvotes: 7

Related Questions