I created a some javascript/jquery code to filter an html table. The filter works by assigning two classes to the rows (‘show’ and ‘hide’) depending on the value of certain cells and then using CSS to hide the rows with the ‘hide’ class. The filter works perfectly. However, when I apply the filter, somehow the table row height keeps changing (usually the height increases significantly – ~ 2 or 3 times the desired height). I have no idea why this is happening. My code is a few hundred lines so I don’t think it would be worth pasting here. And I have no idea which section(s) of my code are causing the problem (or whether the issue is with the javascript/jquery or external css file).
Can anyone offer some suggestions for how I can best debug this problem?
EDIT: In addition to the row height increasing (the main problem), the column width also shrinks a little when the filter is applied.
UPDATE: I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.