Jump to content

saila.com

Online media matters

Why do images in tables have a white gutter on the bottom?

This is most noticeable in Gecko-based browsers like Netscape 6.x and some versions of Mozilla. The consensus seems to be that this is because the browser is treating <img> properly as an inline element. And easy fix is to put this line in your style sheet:

TD>IMG { display: block; }

(For a more thorough explanation read “Tables, Images, and Mysterious Gaps.”)

After Mozilla 1.0, an “almost standard” mode was added to fix this problem. Using either the transistional HTML 4.01 (with a system indentifier) or the transistional XHTML 1.0 DOCTYPEs will trigger this mode (Mozilla.org has the full list).

In older browser a gutter may be due to an extra white space between the <img> and the close <td>. Remove any returns or extra spaces, and the problem should be fixed.