Hide horizontal scrollbar in IE 7 and below

Question

Hi all.

Basically, I'm having trouble removing the horizontal scrollbar in Internet Explorer 7 and Below. I've tried the code below and It seems to work fine in every browser except IE.

overflow-x: hidden;

The even bigger problem is that, even though the scrollbar isn't even removed, it seems to completely screw the layout.. It somehow hides the majority of the page content in boxes 2 and 3? It also.. adds a second vertical scrollbar which moves relatively/absolute positioned items down?! I did contemplate just leaving the scrollbar in IE via a specified stylesheet, but even that seems to be messing with the page?

The website is on a test directory here.. I'll post the stylesheet in a comment below.

Any suggestions?

Thanks in advance, hope you can help! Bradley

Answer 1

Have you tried setting a static width on a container, giving it sufficient height, and then setting overflow:hidden for the entire container? Not sure if that would play well with your JS scrolling, but it might be a move in the right direction.

Oh, and any solution given will probably be insufficient for IE6. That beast just wasn't made for pretty layouts. I guess as an alternative, define a conditional stylesheet for that and/or IE7 for a less complex layout.