RE: CSS 2: Table Cells and the "line-height" Property

On Wed, 28 Mar 2001, Jeffrey Yasskin wrote:
>
> On the image-in-a-table issue:
> Ian, what CSS code would produce an image that completely fills, and
> determines the size of, a table cell? That ought to be Possible, at least,
> even if it's not easy.

There are three ways to do this, depending on exactly what you want:

   td { line-height: 0; }

...or

   img { display: block; }

...or

   img { vertical-align: bottom; }

When you have several images on one line and no text, you want the first
one. When you have only one image or several images but each on a
different line, you want the second one. When your images are bigger than
the font-size, you want the third one.

There are two more options: First, if you are using tables for layout and
really want a backwards-compatible layout, then don't use XHTML or HTML4
Strict -- use a 4.0 Transitional DOCTYPE (without the URI part) and thus
make web browsers use their backwards-compatible rendering system.

If you want to do this the "correct" way then stop using HTML tables for
layout reasons, then use background images and other such CSS mechanisms
to get the effect you want.

Of those five answers, the one I usually give is "display:block".

-- 
Ian Hickson                                     )\     _. - ._.)       fL
Netscape, Standards Compliance QA              /. `- '  (  `--'
+1 650 937 6593                                `- , ) -  > ) \
irc.mozilla.org:Hixie _________________________  (.' \) (.' -' __________

Received on Wednesday, 28 March 2001 19:03:47 UTC