Images Hurt Tables

[Hartley]

All right, I have a very precise layout on a site. For navigation, I'm using images, and they are a part of the layout itself.

I set up the images to be exactly the size of the table cells. The table cell is, for example, height of 20 and width of 40, and the image has the exact same dimensions. Cellpadding and cellspacing are both 0, and there are no borders on the table, yet for some reason, the table feels like adding a few pixels below the image. The below links should illustrate my problem. The first link is of the section in IE, and the second is of the same section in Firefox (it works right in Firefox).

http://ahartley.net/bad.jpg
http://ahartley.net/good.jpg

What am I missing? Thanks in advance!

[Charles]

What am I missing?From the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

[Stephen Philbin]

It's an old problem in most browsers. It's because the image is being displayed as an inline element instead of a block element. Google something like "image inline baseline" and you'll probably get an explanation of why it is happening, but a quick fix to stop it happening is
td img {
display:block;
}


If I remember right, that should fix it.