2. Why do pictures I put in a table have a gap at the bottom?
If you're doing a quick old-school hack, or maintaining an old site, you
will probably hit this problem sooner or later. The issue is that you insert
an IMG into a table for layout purposes, but you can't get your elements aligned
because no matter what you do in your markup, the browser leaves a gap below
your image.
The problem is that modern browsers support CSS (this is good) but it
has some repercussions for old-style code (this is bad). One of the problems
is that the meaning of "bottom" has subtly altered. Modern browsers treat
images as if they were inline text, and the bottom of text isn't the bottom of
the lowest letters - it's the bottom of the characters which don't have descenders.
Even if you don't have any text in your table, it has a default text size, and
the bottom of any image placed in your table will correspond with where the bottom
of this "phantom" text would fall - its
baseline.
As they say, a picture is worth a thousand words, so:
Our little kitty's image doesn't extend to the bottom of his table cell, because the notional text
has redefined what "bottom" means. Even if we specify his valign as "bottom" the problem doesn't
go away, the gap just moves around.
Solution
The solution I use, which works most of the time, is to define a class
in a CSS style file which changes the problematic element from inline to block mode:
td img.nogap {display: block;}
Then use this class in your image tag:
<td>
<img class="nogap" src="images\mypicture.jpg" />
</td>
The display:block overrides the
default layout behaviour in the browser.
For a REALLY detailed discussion of this issue, see here
