Correct horizontal scrolling CSS error
by Sapphire (February 13, 2008)
One of my sites looks perfect in every browser, but Firefox was plonking a horizontal scroll bar down at the bottom. There was nothing for it to scroll over to, so this was a real head-scratcher. (In fact, I hunted for the solution several times over several months.) Now I found it.
It’s a very simple piece of code:
overflow-x:hidden;
But where to put it in your CSS? That depends which class or ID is causing the trouble. To test this, I installed the Theme Test Drive plugin so I could switch over to the default theme* without my visitors seeing it (they continued to see the regular theme). I started adding in elements from my regular theme, such as the header, some pieces of navigation, sidebar plugins, etc. When I suddenly saw the horizontal scroll again, I knew the last thing I’d tinkered with was the one with the overflow problem.
Then I put that code into the class for that item, and the scrollbar disappeared.
*If you have a three column theme, you may need to download another three-column theme for testing.
Posted in Development & Design
Subscribe to the feed or email updates
March 12th, 2008 at 10:22 pm
Thank You!! Works like a charm. This was driving me crazy. Thank you for taking time to publish this.
March 12th, 2008 at 11:34 pm
You’re very welcome!