Welcome to WebmasterWorld Guest from 184.72.138.255

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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1845
votes: 3


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?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


Try setting

img {display:block}

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

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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]

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1845
votes: 3


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?
6:54 pm on Dec 2, 2004 (gmt 0)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


How about using this CSS instead:

td img {
vertical-align: bottom;
}

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1845
votes: 3


I could have sworn I tried that, but:

img {vertical-align:bottom}

seems to fix it. Thanks!

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

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1845
votes: 3


Ah I see, the text baseline. That totally makes sense.
8:06 pm on Dec 2, 2004 (gmt 0)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members