|
|
Posted by John Hosking on 01/14/07 13:31
William wrote:
> Hello all,
>
> I hope someone can help me. I got a problem where some table layout
> won't work the way it's supposed to work, using rowspan.
You mean it won't work the way you expect it to work.
> It's hard to
> explain, but in the example I give you below, there's 3 TDs, the right
> and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
> and the first row should have 16 pixels, and second row whatever height
> the page requires. But it seems that depending on the left or right TD
> height, it affects the height of my middle top TD, which is supposed to
> be fixed at 16 pixels. Anyway, this example should explain it all. Is
> there a way to make that tow middle TD fixed at 16 pixels? It works fine
> with Firefox, but not with Explorer.
>
IE is *special*.
[code snipped]
Your third column is meaningless, and has no effect on this behavior.
Likewise the inner table. The width settings are also irrelevant. You've
really got a 2x2 table, with the first column spanning two rows:
------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦-----¦
¦ ¦ C ¦
¦ ¦ ¦
------------
You've set a suggested minimum height on cell B. (I know you said
"height", but IE treats it as a min-height.) As the content in A grows
in length, B starts to grow in proportion in IE (in FF, B remains constant).
(If you test without setting a height for B, FF gives the same height
for B that we see in IE. Suggesting that FF takes height to be a maximum
or exact height, while IE considers it a minimum.)
Another variation, this one with only one row:
------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦ ¦
------------
You've set a suggested minimum height on cell B. As the content in A
grows in length, B starts to grow in proportion in IE and in FF. The
behavior of cell B in this case seems more intuitive, because we expect
the table to contain the data more than we expect the height
specification for B to be respected.
What we're left with is merely the fact that IE (6 and below; I'm not
testing with 7 here*) treats height as min-height, while FF treats it as
height. Sorry. That's IE for you.
A workaround? Maybe using DIVs would suit your purposes just as well (or
better). But I don't know how to beat it reliably using a table.
* I don't know if that was changed for IE7.
--
John
Navigation:
[Reply to this message]
|