Forum Moderators: open

Message Too Old, No Replies

Setting TD height on multirow.

         

Brett_Tabke

6:27 am on May 31, 2002 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Let me take some rather familar looking names to use as examples:

"user" is spanning two rows in a table (look to left).
"date" is only spanning 1 (look up and right):

<tr>
<td rowspan=2> user </td>
<td> new </td> <td> date </td>
</tr>
<tr>
<td colspan=2> message </td>
</tr>

How can I get that "date" line to use only the height required for the text? Opera restricts it that way, but ie doesn't under certain conditions. When "message" isn't large enough to force IE to expand the height of that td, then it splits the space left over with "date".

Nick_W

6:36 am on May 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Brett, maybe I'm missing something but have you tried adding a height attribute to that cell?

Seems to me that if date is given say 1em in your stylesheet or maybe 20px in the html then the message should take up the slack.

Nick

moonbiter

3:47 pm on May 31, 2002 (gmt 0)

10+ Year Member



AFAIK, you can't set a height or minimum-height like that in IE. From what I can tell, once you span cells or rows the ability to control the size of the cells that are involved is greatly reduced.

You can't set a size that will override the computed value if that size will be below the computed value. You can only set a size that is larger than the computed value.

So, you could try setting the height property of the "message" cell to more than what it's computed value would be, and this would reduce the size of those cells above it. However, you can't set it as a percentage, so the hack of setting the cell to height: 100% won't work. You can only set it as a real value -- which has obvious disadvantages.

If someone has a hack for this, I'm all ears. I've run into this problem before myself, but it defeated me. :(

tedster

5:22 pm on May 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not sure if this is related, but I recently struggled with something in IE that seems similar.

The width that IE allocates for a text line is actually just a bit wider than the visible text seems to need. When the available width of a cell is too close to the end of the text, then IE also grabs a new line in the table cell. This increases the cell height for no obvious reason, because there is no visible content on the new line.

What's going on is the browser is making space to wrap to a new line - even though not one letter is actually going to wrap. This is what increases the browser's cell height calculation.

The way I avoided this unwanted effect was to increase the cell WIDTH, rather than trying to limit or control the cell height. By making sure the cell was just a bit wider than the text seemed to require, the browser didn't calculate the need for a line wrap when one wasn't actually called for.

Brett_Tabke

7:26 pm on Jun 2, 2002 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



see the problem in action on this very post.

Brett_Tabke

7:26 pm on Jun 2, 2002 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



In IE - the date line above is full height.

[edited by: Brett_Tabke at 7:28 pm (utc) on June 2, 2002]

tedster

9:13 pm on Jun 2, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



So it only happens on the short messages - whenever the minimum height needed by the left hand cell (for all the poster's personal data) is more than the total minimum height needed by the two right hand cells (post time and the message itself).

In that situation, IE divvies up the total height by a proportional rule. If both cells have one line, they each get half the available height, etc. When you get enough lines into the message cell, then the date cell is pushed up to use just the minimum height needed for one line of text.

If you set a height attribute in the message cell (I used height=120 in my test) it guarantees at least that much height for the message cell, and then everything seems to work just fine.

[edited by: tedster at 2:09 am (utc) on June 3, 2002]

Brett_Tabke

9:16 pm on Jun 2, 2002 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Excellent. I was trying to come at it from the top instead of bottom. Interesting. Certainly one to remember.

tedster

12:25 am on Jun 3, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yeah, me too - it took me a while to start thinking "outside the box", so to speak.

toadhall

1:07 am on Jun 3, 2002 (gmt 0)

10+ Year Member



When I was analyzing this problem earlier I noticed that the table diagram you included above doesn't reflect the actual table in use. The "new" and "data" cells are one cell in the actual table, so the colspans are out of whack. This may be nit-picking, as it returns a well formed table the way it's written, but...

colspan="3" in the "title" cell should be colspan="2", and colspan="2" in the new/date and message cells should be removed.

Comme ca:


<tr>
<td colspan=2> title </td>
</tr>
<tr>
<td rowspan=2> user </td>
<td> new icon ---- date </td>
</tr>
<tr>
<td> message </td>
</tr>

Writing multirow tables is a lot like taking cod liver oil. You know it's good for you...

Brett_Tabke

7:18 am on Jun 3, 2002 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Thanks Toadhall. It gets rather involved when you consider that there are "new post" graphics that can go in that graphic location. There are also a couple other things that can go in there (reserved stuff - admin actions..etc). So I sorta need that extra colspan in there - such are the joys of generated content.

For now, most of the forum validates (I have been to the mountain) and so far looks good in all browsers I've thrown it at. I'm going to take hands off the message displays for awhile.