Excess space displaying in a firefox table

[sparks80]

I have a fairly simple request that has been bothering me for some time. I have a table with an image as the title, the rest of the data follows a basic tabular format so using a table seems most appropriate. I have set the image in its own table row and within appropriate tags, however no matter what I do firefox will always display the image with an additional 2 pixels at the bottom of the image.

I have tried explicitly setting the table height and width, using style sheets to set height, width, margins and padding, and the table itself is set with no cellpadding or cellspacing.

Does anyone have any thoughts as to what is going on?

I am only getting this error in firefox 1.04 running on an XP box, it displays normally under IE6. I have included the code (pretty simple).

Cheers, Mark

Code ....

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0>

<!-- ******************** titlebar ********************-->
<TR>
<TD STYLE="height:42px;padding:0px;margin:0px;"><IMG SRC="title.jpg" HEIGHT="42" WIDTH="1085" BORDER="0"></TD>
</TR>

[Span]

Basically, images are inline elements like text. They are sitting on the baseline.

There are two ways to get rid of the space.

img {
vertical-align:bottom;
}

or:

img {
display:block;
}

[ronaldb66]

Added to that, I don't think including a title image in a regular cell is such a good idea; if you're game, you could give the caption element a try. I can hold inline content, so images are in as well.

[sparks80]

Thank you for your suggestions. That has worked beautifully. Does anyone know of the reason it is poor practice to use an image inside a table?

I am guessing this has something to do with cross-browser support, and everyones favourite argument as to which is better for layout: DIVs or TABLEs.

[mrruben5]

Why don't you set a background image for the cell?