ansaurus

Question

Answer 1

A:

When in Quirks mode, browsers make deliberate errors.

Since the height of the body element is auto (the default), the height: 100% on the table element becomes auto.

(Percentage heights are converted to auto if the parent element has height: auto)

David Dorward 2010-04-13 06:20:05

I gave <body height="100%">, did not have an effect on the output.

Manohar 2010-04-13 07:06:42

… the HTML element still has `height: auto` so the body get that too!

David Dorward 2010-04-13 08:54:18

But I dont want to specify height in harcoded pixels which could introduce UI bugs. Is there any other way?

Manohar 2010-04-13 10:34:36

`html { height: 100%; }`

David Dorward 2010-04-13 10:47:35

Answer 2

+2 A:

The attribute is valign="middle" or style="vertical-align: middle". There is no attribute vertical-align.

nikc 2010-04-13 06:29:59

I tried with <td style="vertical-align: middle">, but it does not seem to have any effect.

Manohar 2010-04-13 06:40:14

Try adding borders to the `table` (and perhaps the `td`) to see that the table actually has a height. Are you using any devtools, e.g. Firebug?

nikc 2010-04-13 09:17:56

See demo: http://nikc.kapsi.fi/dev/html/misc/table-valign-demo.html

nikc 2010-04-13 09:21:28

Yes I am using firebug, let me check that.

Manohar 2010-04-13 09:25:18

Firebug let's you see the implicit and explicit styles associated with any DOM object. Very useful for debugging strange or unexpected behaviour.

nikc 2010-04-13 09:34:20

It seems default height is being applied in quirks mode. height: 100% is not taken into account, however width: 100% is applied.

Manohar 2010-04-13 10:35:49

As David says, you have to apply `height: 100%` to `html`, `body` and `table` for it to work. See the source of my example.

nikc 2010-04-13 11:05:35

Thanks for this, I got it to work.

Manohar 2010-04-13 11:21:07

vertical-align="middle" for td is not working if we use <!doctype ...>