Hi All,

I've posted this question to several forums and newsgroups... but I haven't gotten any helpful responses yet. If anyone here has a clue, please feel free to beat me with your cluestick.

My problem in a nutshell:
Even though all of the cells in every column of the two tables on the following test page (http://www.shekinahstudios.com/test/dyntab.html) are set to the same width as all other cells in that column and the tables are set to the same width, in Internet Explorer 6.0, the columns don't line up. This can almost be fixed if I change the <th> tags to <td>'s, however as soon as I change the text formatting in one of the tables, the problem reappears (and is further compounded when I put things like form elements in the cells). Mozilla 1.4 displays it *almost* perfectly, except that the columns at index 20 (the 21st columns) end up being off by one despite setting them to the same size. Does anyone know why either of these problems (particularly the first with regard to IE) might be occurring? Because of the intended use of this code, I need to allow the user to put any valid HTML constructs into the table and have it deal with them accordingly.

Further Information:
http://www.shekinahstudios.com/test/dyntab.html represents what I consider to be a minimal test case of the problem. I am working on creating library routines that will end up outputting data to multiple HTML tables which must have their columns aligned. They must be in separate tables because of other JavaScript behavior, which I have left out of this test case for clarity. In the interest of not having to require the user to pay attention to pixel level design details, I attempt to calculate the correct column sizes at render-time via JavaScript.

The method is this. The window.onLoad event fires of a function that first sets the width of all of the table cells in each column to the width of the widest cell. It then sets the widths of the table to that of the wider one (I did this to attempt to fix the alignment problem that appears in IE). It then goes about checking to see that the width of each pair of columns is the same (the 21st column fails this test in Mozilla for some reason). It then ensures that all of the properties of the two tables are the same, alerting the user of any differing properties. Though virtually all of the properties are the same, things still don't line up properly in IE, any ideas? Also, as an aside, the functions for getting and setting the width of the objects were adapted from the xbStyle API. As far as I can tell, they are correct, and the success of checkColumnWidths() appears to indicate as much.

Many thanks,
Matt