Welcome to WebmasterWorld Guest from 54.234.8.146

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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



Try setting

img {display:block}

tedster

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



How about using this CSS instead:

td img {
vertical-align: bottom;
}

Tonearm

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

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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

tedster

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month