Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > <td> height problem

Reply
Thread Tools

<td> height problem

 
 
Deephay
Guest
Posts: n/a
 
      07-13-2008
Greetings all,

I have a problem related to <td> height, I created a table with two
rows and three cells, the left cell have the attribute rowspan="2",
here's the HTML:

<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="2" style="width: 55%">
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
fox<br />
</td>
<td valign="top" style="height: 100%">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</td>
</tr>
<tr>
<td valign="top">
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
The quick brown fox jumps over the lazy dog<br />
</td>
</tr>
</table>
</body>
</html>

I want the height of the top right cell just equal to the height
content inside the cell, specify the height of the top right cell in
the stylesheet to "100%" will do the job in Firefox, but I do not know
how to achieve this in IE, anyone have any idea?

For the Firefox behavior, I am quite confused too. According to W3C
CSS 2.1 spec, the height of a box will be around "height of the
containing box" * "height percentage you specified in the stylesheet",
if my understanding is correct, the "containing box" of a <td> is the
<table> itself, so why specify "height: 100%" for the top right <td>
shrinks its height in Firefox?

Thanks very much for the help!

Cheers,
Difei
 
Reply With Quote
 
 
 
 
Deephay
Guest
Posts: n/a
 
      07-15-2008
On Jul 13, 11:12*pm, Ben C <(E-Mail Removed)> wrote:
> On 2008-07-13, Deephay <(E-Mail Removed)> wrote:
>
>
>
> > Greetings all,

>
> > * I have a problem related to <td> height, I created a table with two
> > rows and three cells, the left cell have the attribute rowspan="2",
> > here's the HTML:

>
> ><html>
> > * *<body>
> > * * * * * *<table width="100%" border="1">
> > * * * * * * * * * *<tr>
> > * * * * * * * * * * * * * *<td rowspan="2" style="width: 55%">
> > * * * * * * * * * * * * * * * * * *fox<br />

> [...]
> > * * * * * * * * * * * * * * * * * *fox<br />
> > * * * * * * * * * * * * * *</td>
> > * * * * * * * * * * * * * *<td valign="top" style="height: 100%">
> > * * * * * * * * * * * * * * * * * *The quick brown fox jumps over the lazy dog<br />

> [...]
> > * * * * * * * * * * * * * * * * * *The quick brown fox jumps over the lazy dog<br />
> > * * * * * * * * * * * * * *</td>
> > * * * * * * * * * *</tr>
> > * * * * * * * * * *<tr>
> > * * * * * * * * * * * * * *<td valign="top">
> > * * * * * * * * * * * * * * * * * *The quick brown fox jumps over the lazy dog<br />

> [...]
> > * * * * * * * * * * * * * * * * * *The quick brown fox jumps over the lazy dog<br />
> > * * * * * * * * * * * * * *</td>
> > * * * * * * * * * *</tr>
> > * * * * * *</table>
> > * *</body>
> ></html>

>
> > * I want the height of the top right cell just equal to the height
> > content inside the cell, specify the height of the top right cell in
> > the stylesheet to "100%" will do the job in Firefox, but I do not know
> > how to achieve this in IE, anyone have any idea?

>
> > * For the Firefox behavior, I am quite confused too. According to W3C
> > CSS 2.1 spec, the height of a box will be around "height of the
> > containing box" * "height percentage you specified in the stylesheet",
> > if my understanding is correct, the "containing box" of a <td> is the
> ><table> itself, so why specify "height: 100%" for the top right <td>
> > shrinks its height in Firefox?

>
> You're right that what Firefox is doing there is not in the CSS 2.1
> specification.
>
> The rules are a bit different for table cells, and to a large extent
> browsers make their own rules.
>
> Height: 100% on a table cell usually sort of means make it 100% of the
> height of the row it's in, but your example is further complicated by
> the fact that the row is spanned by the cell in the first column.
>
> So the browser has to ask itself how much of the first cell it thinks is
> in the first of the two rows it spans and how much in the second. This
> is not something I've seen specified anywhere.
>
> Setting height: 1px instead, as an indication that you'd like that cell
> as short as possible, will also work in Firefox and might work in IE if
> you're lucky. It will never be 1px but at least as high as required by
> the content.


Hi,
Thanks for help. Unfortunately "height: 1px" does not work in IE.
are there any other way?

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-15-2008
Deephay wrote:

> Hi,
> Thanks for help. Unfortunately "height: 1px" does not work in IE.
> are there any other way?
>


Maybe you are using a hammer when you need a screw driver, i.e., a table
is not what you should be using. How about a URL to a sample page with
actual content and we can have a better idea what you are attempting
then can better advise.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Deephay
Guest
Posts: n/a
 
      07-15-2008
On Jul 15, 8:41*pm, Ben C <(E-Mail Removed)> wrote:
> On 2008-07-15, Deephay <(E-Mail Removed)> wrote:
>
>
>
> > On Jul 13, 11:12*pm, Ben C <(E-Mail Removed)> wrote:
> >> On 2008-07-13, Deephay <(E-Mail Removed)> wrote:

>
> >> > Greetings all,

>
> >> > * I have a problem related to <td> height, I created a table with two
> >> > rows and three cells, the left cell have the attribute rowspan="2",
> >> > here's the HTML:

> [...]
> >> > * I want the height of the top right cell just equal to the height
> >> > content inside the cell, specify the height of the top right cell in
> >> > the stylesheet to "100%" will do the job in Firefox, but I do not know
> >> > how to achieve this in IE, anyone have any idea?

>
> >> > * For the Firefox behavior, I am quite confused too. According to W3C
> >> > CSS 2.1 spec, the height of a box will be around "height of the
> >> > containing box" * "height percentage you specified in the stylesheet",
> >> > if my understanding is correct, the "containing box" of a <td> is the
> >> ><table> itself, so why specify "height: 100%" for the top right <td>
> >> > shrinks its height in Firefox?

>
> >> You're right that what Firefox is doing there is not in the CSS 2.1
> >> specification.

>
> >> The rules are a bit different for table cells, and to a large extent
> >> browsers make their own rules.

>
> >> Height: 100% on a table cell usually sort of means make it 100% of the
> >> height of the row it's in, but your example is further complicated by
> >> the fact that the row is spanned by the cell in the first column.

>
> >> So the browser has to ask itself how much of the first cell it thinks is
> >> in the first of the two rows it spans and how much in the second. This
> >> is not something I've seen specified anywhere.

>
> >> Setting height: 1px instead, as an indication that you'd like that cell
> >> as short as possible, will also work in Firefox and might work in IE if
> >> you're lucky. It will never be 1px but at least as high as required by
> >> the content.

>
> > Hi,
> > * Thanks for help. Unfortunately "height: 1px" does not work in IE.
> > are there any other way?

>
> There might be, but I don't know much about IE.
>
> You might be better off to decouple thing by nesting another table.
> Outer table with two columns and one row. One cell in the first column.
> The other column contains another table with two rows.
>
> Now there's no rowspan, so maybe the height: 1px will work on IE to
> keep that cell down to its content height only.
>
> Or see if you can manage without tables altogether as Jonathan
> suggested.


OK, thanks you all for the advice.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-15-2008
Deephay wrote:

> OK, thanks you all for the advice.


<shrugs...>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
getting exact height of a panel with a height="100%" samer ASP .Net 3 09-28-2009 05:21 PM
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
textbox height different than input height tshad ASP .Net 1 03-08-2007 10:04 PM
measuring web controls height at runtime (or converting .height % to px) Wotney ASP .Net 1 10-25-2006 01:39 PM
how to get specific cell height without hard-coding a height value laredotornado@zipmail.com HTML 0 08-19-2006 08:13 PM



Advertisments