M
Matthew Van Gundy
An example can be found at: http://www.shekinahstudios.com/test/dyntab.html
The problem in a nutshell:
Even though all of the cells in every column 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) 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?
Many thanks,
Matthew Van Gundy
matthewvg At Yardi Dot Com
The problem in a nutshell:
Even though all of the cells in every column 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) 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?
Many thanks,
Matthew Van Gundy
matthewvg At Yardi Dot Com