Space appearing below image in table cell, only in Firefox

Forum Moderators: open

Message Too Old, No Replies

Space appearing below image in table cell, only in Firefox

sonburn

11:54 pm on Mar 7, 2007 (gmt 0)

Someone want to help me understand why a space is appearing below images in table cells, in Firefox? I have tested in two different Firefox installations on two different machines (UPDATE: Using Firefox version 2.0.0.2). Below is test code and the image is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

</html>

[edited by: sonburn at 12:27 am (utc) on Mar. 8, 2007]

sonburn

11:55 pm on Mar 7, 2007 (gmt 0)

For what it's worth, removing the DOCTYPE "fixes" the issue. Of course, removing the DOCTYPE is not a desirable solution.

encyclo

1:43 am on Mar 8, 2007 (gmt 0)

When in standards-compliance mode (due to the doctype), images are inline elements, not block-level. You can usually fix the problem with the extra space (present to account for the descender of any accompanying text) by the following CSS:

img {display:block;}

Or by adding

style="display:block;"

to your

img

element.

sonburn

2:15 am on Mar 8, 2007 (gmt 0)

I guess I find it interesting then that IE 6 and 7 both don't have the space, only FF did. Oh well, display: block fixed the issue. Thanks for the help!

tedster

3:06 am on Mar 8, 2007 (gmt 0)

There will be other browsers that show the same space - it is the W3C standard. In Standards Mode, inline elements should align to the text baseline and not the bottom of the containing element. This allows for font descenders that go below the baseline, which is the extra space you see.

Quirks Mode vs. Standards Mode - overview [webmasterworld.com]