How you debug horizontal scroll bar issue?

Question

There is no scroll bar when browsed with firefox,

but it shows up in IE.

How to track this kind of problem?

Answer 1

Well, I would start by clicking VIEW | SOURCE in my browser menu, but nothing comes up (I'm using IE7), which is pretty weird. I was able to save the file to my desktop and view it in Notepad. Near the top there's a reference to a stylesheet named "fixedBottoomIE6.css" which appears to apply only to IE, which may account for the difference.

So as a general answer to your question, I would begin the debugging process by looking at the source in a text editor.

Update: yeah, the problem is almost certainly that stylesheet, because when I open the file saved to my desktop in IE, I don't get the horizontal scrollbar (I do get it with the online version). The link to the stylesheet is relative, and since the stylesheet isn't on my desktop it isn't applied.

Answer 2

I find that 99% of the time, it has to do with padding and defining the width of HTML/Body. I follow no specific approach, but look around for definitions like those. I start every CSS problem with Web Inspector in Safari, since it passes Acid3.

Answer 3

A great way to debug this is to use Firebug live css editor. Apply a (display:none;) to every section, one by one. Once you found the section with the bug, your scroll bar will disappear (great relief!). Do the same for every element in the section. You should find precisely your bug.

For me, it happened to be a shadow effect that was adding :before and :after content.

Answer 4

If you are using IE then I would start with using the debugger that comes with IE8.

Also, change the doctype and the modes that IE8 operates in and see if you can detect a pattern.

For example, does it only show up in quirks mode?

Also, what situations cause the scrollbar to show up. Is the div full or half empty?

By using the debugger you can look at the dom and css styles of the component and see if there is a pattern.