homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

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)

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">
<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}
<td><a href="test.html"><img alt="" height="20" src="image.gif" width="20" /></a></td>

Does anyone know how to fix that?



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

Try setting

img {display:block}


 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]


 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?


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

How about using this CSS instead:

td img {
vertical-align: bottom;


 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!


 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.


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

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


 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved