Blame the Browser

He was sure it was a JavaScript problem. We had two tables (that we knew of) that were displaying a disabled scroll bar when it wasn’t needed. The rest of them we had checked were fine. Actually, I should say that a div was displaying the scrollbar. You see, we have tables in which the body must scroll separately from the header. So, I implemented it such that the header and body are actually two separate tables. The body table is in a div that gets a max-height set by JS, based on the height of the window, and has overflow set to auto. The developer that was assigned to fix the bug was looking for a problem in the div sizing logic. He couldn’t find anything. Then I took a crack at it, searching for differences in the CSS. The scroll bar was only showing up in IE, of course, so Firebug couldn’t help me. I was stuck using IE’s built-in developer tools. I compared the broken table with one that was working and compared both of those to my original prototype. The styles being applied were identical. We had spent hours trying to figure it out, and were no closer to finding a solution than when we started.

Finally, I started comparing the tables themselves. It occurred to me that the buggy one incorporated row spans, while my prototype and the working table did not. I removed the row spans and voilà! The scroll bar disappeared. We spent all that time assuming that something was wrong with our code. I should have known it would be a quirky IE bug.

blog comments powered by Disqus