table {height: 100%} goes crazy in standard mode

IE doesn't respect fixed height of cells when table is set to 100%

[Joey33]

Hello to all,

Have you encountered the same problem?
Here it goes:

Table height is set to 100%:

table#mother {height: 100%}

It has, let's say 3 cells, two of them have explicitly set heights and the last one does not:

td#one {height: 100px;}
td#two {height: 100px;}
td#three {}

When I delete DTD and so switch to quirks mode, everything works fine - two cells have their dimension and the last one stretches to fill the blank space because mother table is 100% height of the viewport.

However, in stnd mode, both IE 6 and 7 go berserk. Suddenly td#one and td#two have much bigger heights, their css rules are totally ignored.

Body and html are set to 100% so the table stretches to the whole height of the viewport but cell heights are totally messed up...

Have you got any idea what's the crux?

[edited by: SuzyUK at 9:04 am (utc) on July 11, 2007]
[edit reason] fixed formatting ;) [/edit]

[Joey33]

Sorry for misused html tags in the above post;) I didn't read into the instructions.

[Demaestro]

What I have done in your spot is create a .GIF image that is 1px by 1px and transparent.

Then put that gif in the cells and assign it a height..... It isn't the most elegant thing but it works.

I usually name it shim.gif

If you can't create the image let me know and I will post one up and PM you the URL and you can grab it.

[lavazza]

Rather than # use .

.mother {height: 100%;}
.one {height: 100px; background:#FF0000;}
.two {height: 100px; background:#00FF00;}
.three {background:#0000FF;}

<table class="mother" border="1">
<tr><td class="one">.mother {height: 100%;}<br/>.one {height: 100px; background:#FF0000;}</td>
</tr><tr><td class="two">.two {height: 100px; background:#00FF00;}</td>
</tr><tr><td class="three">.three {background:#0000FF;}</td>
</tr>
</table>

[Joey33]

I'm afraid you misundertood my issue.

You're right about situations when cells just don't show up because they don't have any content. But tha's not my case.

In my table cells are much higher than defined in css rules. It only happens when IE is switched to stnd mode and table has 100% height.

Thanks for the good will anyway;)

[Joey33]

to lavazza:

doesn't work either...;(

cells 1 and 2 are stretched far beyond the height defined in css rules.

[Marshall]

This could be affected by table padding and/or cell spacing. First, try setting your table and cell padding to zero. Use your <p> tags to set padding for text. have the third cell set to 100% and delete the table height.

Just a thought.
Marshall

[Joey33]

to Marshall:

Doesn't work... The main table doesn't stretch.

[lavazza]

whoops! My mistake... the file I used didn't have a dtd when I ran it

with a dtd, it looks #@&*

[lavazza]

Not sure if this is the reason... but there's no mention of a height attribute for tables in either
[w3.org...]
or
[w3.org...]

-----------
<!--===== Tables ===== -->

<!ATTLIST TABLE -- table element --
%attrs; -- %coreattrs, %i18n, %events --
summary %Text; #IMPLIED -- purpose/structure for speech output--
width %Length; #IMPLIED -- table width --
border %Pixels; #IMPLIED -- controls frame width around table --
frame %TFrame; #IMPLIED -- which parts of frame to render --
rules %TRules; #IMPLIED -- rulings between rows and cols --
cellspacing %Length; #IMPLIED -- spacing between cells --
cellpadding %Length; #IMPLIED -- spacing within cells --
%reserved; -- reserved for possible future use --
datapagesize CDATA #IMPLIED -- reserved for possible future use --
>

[tedster]

I'd say lavazza is on to something. Note this from the W3C:

11.2.6 Table cells: The TH and TD elements...

height = length [CN]
Deprecated. This attribute supplies user agents with a recommended cell height

[w3.org...]

That explains why browsers in standards mode would ignore the rule. And even before "height" was deprecated, notice the use of the word "recommended". That is not the same as saying "defined" or "restricted".

In short, browsers have a lot of latitude in how they interpret (or ignore) a height rule for a table cell. They need this latitude to avoid taking in contradictory instructions and getting caughgt in a loop. Their first obligation is to get the cell content displayed on screen, not to follow the author's rules for cell dimensions.

So whatever you are hoping to achieve in this layout needs to be re-thought here, because you cannot dictate table cell height.

[Joey33]

Yes, probably it's time to rethink my layout practices and turn to divs.

However, as far as I remember I've tried that already and couldn't position images vertically in the center. The problem was that they were dynamically loaded from db so I couldn't precisely set the dimensions. Css:
td#imageholder {
display: table-cell;
vertical-align: middle;
}
was ok with Gecko engine but, of course, to IE that was like ancient Greek.

So, all in all, I resorted to tables again to have some common grounds working cross-browser.

But now, as I see it thanks to your generous hints, there is no one single perfect solution.

In this particular case I'll define the height for all the cells explicitly and remove 100% for the table because fortunately then it does work in all browsers. The table will just be fixed not adapting to different viewport heights at different users.

MANY thanks to all of you for help. It's pretty reassuring to know they are people willing to be with you at moments of not knowing what to do. Great place.

Regards,
Joey