M
Matthew Van Gundy
Hi All,
I initially tried posting this in comp.lang.javascript, but it hasn't
had any bites yet. Perhaps this is a more appropriate place for it. If
anyone has any ideas for a solution or clues as to a more appropriate
place to post this please let me know.
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,
Matthew Van Gundy
matthewvg At Yardi Dot Com
I initially tried posting this in comp.lang.javascript, but it hasn't
had any bites yet. Perhaps this is a more appropriate place for it. If
anyone has any ideas for a solution or clues as to a more appropriate
place to post this please let me know.
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,
Matthew Van Gundy
matthewvg At Yardi Dot Com