How to get IE6 to respect <td> height attribute?

[Danny]

In the following example, the "blue" cells will actually contain a
background image and I'd like them to be 50 pixels high. The middle
column contains text. I'd like the "red" cells to expand to fill
whatever height the text takes the table to. However, IE6 does not
respect the height="50" on the blue cells. It allocates the majority
of the height to the blue cells - using what algorithm I'm not sure:

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="50" bgcolor="blue">&nbsp;</td>
<td rowspan="2" width="300">blah di blah di blah di blah blah
blah. blah di blah di blah
di blah blah blah. blah di blah di blah di blah blah blah. blah
di blah
di blah di blah blah blah. blah di blah di blah di blah blah
blah. blah
di blah di blah di blah blah blah. blah di blah di blah di blah
blah blah.
blah di blah di blah di blah blah blah. blah di blah di blah di
blah blah
blah. blah di blah di blah di blah blah blah. </td>
<td width="300" height="50" bgcolor="blue">&nbsp;</td>
</tr>
<tr>
<td bgcolor="red">&nbsp;</td>
<td bgcolor="red">&nbsp;</td>
</tr>
</table>

Mozilla 1.5 handles this fine.

I've tried assigning the height of the blue cells with CSS, to no
effect. Any way to bludgeon IE into obedience? Or do I have to abandon
the table and use <div>s?

 

[Els]

In the following example, the "blue" cells will actually contain a
background image and I'd like them to be 50 pixels high. The middle
column contains text. I'd like the "red" cells to expand to fill
whatever height the text takes the table to. However, IE6 does not
respect the height="50" on the blue cells. It allocates the majority
of the height to the blue cells - using what algorithm I'm not sure:

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="50" bgcolor="blue">&nbsp;</td>
<td rowspan="2" width="300">blah di blah di blah di blah blah
blah. blah di blah di blah
di blah blah blah. blah di blah di blah di blah blah blah. blah
di blah
di blah di blah blah blah. blah di blah di blah di blah blah
blah. blah
di blah di blah di blah blah blah. blah di blah di blah di blah
blah blah.
blah di blah di blah di blah blah blah. blah di blah di blah di
blah blah
blah. blah di blah di blah di blah blah blah. </td>
<td width="300" height="50" bgcolor="blue">&nbsp;</td>
</tr>
<tr>
<td bgcolor="red">&nbsp;</td>
<td bgcolor="red">&nbsp;</td>
</tr>
</table>

Mozilla 1.5 handles this fine.

I've tried assigning the height of the blue cells with CSS, to no
effect. Any way to bludgeon IE into obedience? Or do I have to abandon
the table and use <div>s?

My IE obeys my orders ;-)
I don't use width= and height= in the html though.
If I want all td's the same height, I use
td {height:50px;}
(in the css file, or in a style block)
If it's one particular row of td's I want a certain height,
I assign a class to the first td in that row, like this:
<tr>
<td class="anyword">bla bla bla</td>
<td>bla bla again</td>
</tr>
and style it in the css file like this:
td.anyword {height:50px;}

If this doesn't work for you, you probably made some mistake
somewhere, in that case, upload the document so people here
can examine it.
Maybe it has to do with your rowspans as well, I'm not sure
of the effect that has.

 

[Danny]

My IE obeys my orders ;-)
I don't use width= and height= in the html though.
If I want all td's the same height, I use
td {height:50px;}
(in the css file, or in a style block)
If it's one particular row of td's I want a certain height,
I assign a class to the first td in that row, like this:
<tr>
<td class="anyword">bla bla bla</td>
<td>bla bla again</td>
</tr>
and style it in the css file like this:
td.anyword {height:50px;}

If this doesn't work for you, you probably made some mistake
somewhere, in that case, upload the document so people here
can examine it.
Maybe it has to do with your rowspans as well, I'm not sure
of the effect that has.

I've tried assigning height via CSS, with the same result. It is
definitely the rowspan=2 on the text cell that is causing the problem
- although as far as I can see it shouldn't. Unfortunately, I need the
rowspan to get the effect I am looking for. I'm writing a Dreamweaver
template, so I don't know in advance what the height of the main text
cell (and hence the red cells) will be. I do know that I want the blue
cells to be 50px high - they will actually have a background image
that ends in solid red at the bottom, thereby merging visually with
the red cells underneath.

Here's the complete doc:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<style type="text/css">
..h50 {
height: 50px;
width: 100px;
background-color: blue;
}
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h50">&nbsp;</td>
<td rowspan="2" width="300">blah di blah di blah di blah blah
blah. blah di blah di blah
di blah blah blah. blah di blah di blah di blah blah blah. blah
di blah
di blah di blah blah blah. blah di blah di blah di blah blah
blah. blah
di blah di blah di blah blah blah. blah di blah di blah di blah
blah blah.
blah di blah di blah di blah blah blah. blah di blah di blah di
blah blah
blah. blah di blah di blah di blah blah blah. </td>
<td class="h50">&nbsp;</td>
</tr>
<tr>
<td bgcolor="red">&nbsp;</td>
<td bgcolor="red">&nbsp;</td>
</tr>
</table>
</body>
</html>

 

[Els]

I've tried assigning height via CSS, with the same result. It is
definitely the rowspan=2 on the text cell that is causing the problem
- although as far as I can see it shouldn't. Unfortunately, I need the
rowspan to get the effect I am looking for. I'm writing a Dreamweaver
template, so I don't know in advance what the height of the main text
cell (and hence the red cells) will be. I do know that I want the blue
cells to be 50px high - they will actually have a background image
that ends in solid red at the bottom, thereby merging visually with
the red cells underneath.

[snip code]

I fiddled around a bit with it, but it just won't obey :-(

Of course you can have the visual effect using other
'tricks', like having just 3 cells, the left and right
having a background-image no-repeat at the top, on a red
background color, and have the content in those cells start
at 50px from the top.

 

[Danny]

I fiddled around a bit with it, but it just won't obey :-(

Of course you can have the visual effect using other
'tricks', like having just 3 cells, the left and right
having a background-image no-repeat at the top, on a red
background color, and have the content in those cells start
at 50px from the top.

Thanks for your help.... this had just occurred to me too!

I now know *why* my example doesn't work as expected. The detail is
at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
(section headed Restraining Row Heights, containing Figure 10-13).

The crucial point is: "the [<td>] height attribute specifies a
minimum, not a maximum". Makes sense if you think of a cell with
height=50 but filled with loads of contents - the height will expand
beyond 50 if necessary to display the contents.

It's a bit counter-intuitive in my example, because both the blue and
red cells just contain a space. I guess that IE handles the rowspan=2
by assigning the height needed from the topmost cell down. And the
height of the red cell, since I don't specify it, is the minimum
required to hold a space.

 

[Els]

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
(section headed Restraining Row Heights, containing Figure 10-13).

The crucial point is: "the [<td>] height attribute specifies a
minimum, not a maximum". Makes sense if you think of a cell with
height=50 but filled with loads of contents - the height will expand
beyond 50 if necessary to display the contents.

It's a bit counter-intuitive in my example, because both the blue and
red cells just contain a space. I guess that IE handles the rowspan=2
by assigning the height needed from the topmost cell down. And the
height of the red cell, since I don't specify it, is the minimum
required to hold a space.

I think that must be the case then.
Well, at least we have learned something new today

 

[DU]

I fiddled around a bit with it, but it just won't obey :-(

Of course you can have the visual effect using other
'tricks', like having just 3 cells, the left and right
having a background-image no-repeat at the top, on a red
background color, and have the content in those cells start
at 50px from the top.

Thanks for your help.... this had just occurred to me too!

I now know *why* my example doesn't work as expected. The detail is
at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwdn/html/ch10_tables.asp
(section headed Restraining Row Heights, containing Figure 10-13).

The crucial point is: "the [<td>] height attribute specifies a
minimum, not a maximum". Makes sense if you think of a cell with
height=50 but filled with loads of contents - the height will expand
beyond 50 if necessary to display the contents.

MSIE 6 for windows still has a bug on overflow:visible. It will make the
element's box grow when it should not according to W3C CSS2 Technical

It's a bit counter-intuitive in my example, because both the blue and
red cells just contain a space. I guess that IE handles the rowspan=2
by assigning the height needed from the topmost cell down. And the
height of the red cell, since I don't specify it, is the minimum
required to hold a space.

No. The height of that cell is entirely dependent on the height needed
to hold all of the blah blah text. If not defined, height (or width) is
auto in W3C web standards compliant browsers.

If the content of that td with rowspan="2" is normal and reasonable -
that is with tabular data, not just text - then MSIE 6 for windows in
standards compliant rendering mode renders perfectly 2 table rows of 50
pixels high and these 5 <td>s. You may need to add the css declaration
overflow:auto if needed.
Btw, the width values don't add up: 100 + 300 + 300 > 500

In any case, it looks to me that you are using a table design to create
2 columns for navigation (and or menu, links) and 1 central column for
content... which should not be the purpose nor normal usage for <table>.
There are many [tutorial] sites explaining, detailing and offering
alternatives to table design.

DU

 

[mensor]

(sorry...I didn't copy all the above text)

My problem is vey similar:
(I don't think this will come out right, but you can imagine what I'
trying to show (2 left cells in 1 column, then matching right colum
with 1 large cell)
******************
* * *
* 1 * *
******* *
* * 3 *
* 2 * *
* * *
* * *
******************

IE wouldn't display cell 1 as 200px, no matter what I did (CSS
height=200, etc), even though the contents of the cell were exactl
200...the contents of cell 3 seemed to make the difference. When cel
3 was very large, cell 1 and 2 would be about the same size, but whe
cell 3 was smaller than the two put together, then cell 1 would act th
right way.

Here is how I solved my issue with it...

I created a function for body (onload) that would find the clien
height, then subtract my header bar (stuff above the table)...then se
the cell2.style.height = to that number....I did this only for I
(if(docuement.all))

I hope this helps you with your problem!

Mike
-
menso

 

[brucie]

in post: <

Posted via http://www.forum4designers.com

4 popular newsreaders:
http://www.forteinc.com/
http://xnews.newsguy.com/
http://www.40tude.com/dialog/
http://lightning.prohosting.com/~tbates/gravity/

free newsfeed:
http://news.individual.net/

the newsgroup F4D posted to:

info about the group
http://alt-html.info/