Correct horizontal scrolling CSS error

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.

1. Theme test drive Wordpress plugin
2. If the styling for captions in Wordpress 2.6 doesn’t seem to work…
3. SEO tip for Wordpress themes
4. Simple ad rotator script
5. Optimize your Adsense Ads

Categories: Development & Design   |   Tags:  |  2 Comments »