Explorer table weirdness... can anyone explain?

[xperiencednoob]

I want a left-column menu bar and a right-column data area. The menu
items (6 or so) are fixed-height and the space below them needs to
expand. I've run into a strange situation only with IE6. Please try the
code below and help me figure out what's going on.

Execute the following code in Explorer:

--------------------
<TABLE BORDER=1 height="100%" width="100%">
<TR height="34"><Td width="125">A</TD><Td rowspan="6">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>

</TD></TR>
<TR height="34"><Td >B</TD></TR>
<TR height="34"><Td >C</TD></TR>
<TR height="34"><Td >D</TD></TR>
<TR height="34"><Td >E</TD></TR>
<TR><TD ROWSPAN=2>F</TD></TR>
</TABLE>
--------------------

Notice that B C D E are all the correct height.

Now add one more <p>blah</p> line to the others like so:

--------------------
<TABLE BORDER=1 height="100%" width="100%">
<TR height="34"><Td width="125">A</TD><Td rowspan="6">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p> <!-- added line here -->

</TD></TR>
<TR height="34"><Td >B</TD></TR>
<TR height="34"><Td >C</TD></TR>
<TR height="34"><Td >D</TD></TR>
<TR height="34"><Td >E</TD></TR>
<TR><TD ROWSPAN=2>F</TD></TR>
</TABLE>
--------------------

and all the sudden all the 34px tall cells start to grow. Add more
"blahs" and they keep growing. This only happens on Explorer. It seems
that 6 lines is the threshold before the rows start expanding.

How do I get around this? I haven't coded HTML for a while so this one
is new to me. It works fine on Firefox and the Mac browsers... it seems
like IE6 is the only strange one.

Thanks!

[Harlan Messinger]

xperiencednoob wrote:

I want a left-column menu bar and a right-column data area. The menu
items (6 or so) are fixed-height and the space below them needs to
expand. I've run into a strange situation only with IE6. Please try the
code below and help me figure out what's going on.

Execute the following code in Explorer:

--------------------
<TABLE BORDER=1 height="100%" width="100%">
<TR height="34"><Td width="125">A</TD><Td rowspan="6">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>

</TD></TR>
<TR height="34"><Td >B</TD></TR>
<TR height="34"><Td >C</TD></TR>
<TR height="34"><Td >D</TD></TR>
<TR height="34"><Td >E</TD></TR>
<TR><TD ROWSPAN=2>F</TD></TR>
</TABLE>
--------------------

Notice that B C D E are all the correct height.

Inspect your code again. Your table looks like this:

SZ
TZ
UZ
VZ
WZ
XZ
X?

The Zs indicate the cell with rowspan="6", and the Xs represent the cell
with rowspan="2". Then you've got a cell in the lower right that isn't
defined in your code.

[xperiencednoob]

OK, looks like I rushed when I wrote the code. Here is a cleaner
version that has the same problem:

<TABLE BORDER=1 height="100%" width="100%">
<TR height="34">
<TD width="125">A</TD>
<TD rowspan="6">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
</TD>
</TR>

<TR height="34"><TD width="125">B</TD></TR>
<TR height="34"><TD width="125">C</TD></TR>
<TR height="34"><TD width="125">D</TD></TR>
<TR height="34"><TD width="125">E</TD></TR>
<TR> <TD width="125">F</TD></TR>

</TABLE>

Now, if you open the above code in IE6 rows A through E are the correct
fixed height of 34px while row F stretches to fit the screen. If you
add one more "blah" line, A through E stretch their height. Adding more
lines stretches them even more. Can anyone help?

Thanks, and sorry for the sloppy code.

[xperiencednoob]

If anyone can shed some light on this I'd be grateful... It's got to be
something simple relative to Explorer... it happens on both Mac and PC
platforms using IE. Thanks.

[c.thornquist]

"xperiencednoob" <go**********@fatsquid.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...

If anyone can shed some light on this I'd be grateful... It's got to be
something simple relative to Explorer... it happens on both Mac and PC
platforms using IE. Thanks.

<TABLE BORDER=1 height="100%" width="100%">
<TR height="34">
<TD width="125">A</TD>
<TD rowspan="7" valign="top">
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
</TD>
</TR>

<TR height="34"><TD width="125">B</TD></TR>
<TR height="34"><TD width="125">C</TD></TR>
<TR height="34"><TD width="125">D</TD></TR>
<TR height="34"><TD width="125">E</TD></TR>
<TR> <TD width="125">F</TD></TR>
<TR> <TD width="125"><img src="spacer.gif" width="1" height="150" alt=""
border="0"></TD></TR>

</TABLE>

I used a 1x1 px transparent .gif to jack up the left column (and made the
right column a rowspan 7). Is that what you want? If so, as your "blah's"
increase, increase the height on your .gif.

Carla

[xperiencednoob]

Thanks for the suggest Carla. What I was really after (besides a fix)
is the underlying reason why Explorer does this and the others don't.
It seems like there'd be a explanation of this behavior somwhere.

Anyhow, I solved the problem by using DIV's and simply stacking my menu
graphics one afte the other in a single left-hand column. This gets
around the issue all together, but I'm still confused why it happened
in the first place.

Thanks again.