vertical-align image to the bottom of a table cell

Forum Moderators: open

Message Too Old, No Replies

vertical-align image to the bottom of a table cell

small gap in Firefox, Opera, Mozilla but none in IE

Tonearm

5:25 pm on Dec 2, 2004 (gmt 0)

The following code leaves a 4 pixel gap underneath the image in Firefox and Opera, a 5 pixel gap in Mozilla 1.4, and no gap in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
* {padding:0;margin:0;border:0}
.* {padding:0;margin:0;border:0}
table {border-collapse:collapse}
td {background-color:black;vertical-align:bottom}
div {background-color:red}
</style>
</head>
<body>
<table>
<tr>
<td><div>left</div></td>
<td><a href="test.html"><img alt="" height="20" src="image.gif" width="20" /></a></td>
<td><div>right</div></td>
</tr>
</table>
</body>

Does anyone know how to fix that?

choster

5:49 pm on Dec 2, 2004 (gmt 0)

Try setting

img {display:block}

tedster

5:58 pm on Dec 2, 2004 (gmt 0)

This is one of those quirks mode versus standards mode things - IE gets the rendering wrong, and so we get surprised when a more standards compliant browser displays the gap.

You can learn more here:

Quirks mode vs. Standards mode [webmasterworld.com]

Tonearm

6:10 pm on Dec 2, 2004 (gmt 0)

That works great, except text-align:center no longer works on the images and they always align to the left. Any way to get them to center and lose the gap?

tedster

6:54 pm on Dec 2, 2004 (gmt 0)

How about using this CSS instead:

td img {
vertical-align: bottom;
}

Tonearm

7:09 pm on Dec 2, 2004 (gmt 0)

I could have sworn I tried that, but:

img {vertical-align:bottom}

seems to fix it. Thanks!

tedster

7:27 pm on Dec 2, 2004 (gmt 0)

This CSS rule goes right to the heart of the matter. The issue is that, by default, images are an inline element. The W3C standard is that inline elements are aligned to the TEXT BASELINE, which is always a few px above the bottom of a table cell in order to leave some room for the descenders on letters such as "g" and "y".

Hence we get a gap. Changing the <img> element to display:block fixes that particular issue, but then (on a standards compliant browser) the centering rules that work on inline elements are no longer applied.

I'm glad it's fixed for you.

Tonearm

7:32 pm on Dec 2, 2004 (gmt 0)

Ah I see, the text baseline. That totally makes sense.

tedster

8:06 pm on Dec 2, 2004 (gmt 0)

There is another fix - a really dumbed down approach -and that is just to remove the DTD (or use a partial DTD that does not inlcude the URL). Then the browser switches over to rendering in quirks mode, just like all the older browser - and stops bothering you with all that standards compliant stuff.

When the first doc-type switching came out I paid very little attention to the comments and articles about it, for a while, at least. And then I got bit bad and had to do some serious study again. I'm sure the future will hold a few more similar surprises.