I couldn't find anything that quite matched this, it's so obvious it's probably been reported elsewhere though... mozilla is incorrectly calculating the height of the image or table when rendering tables with images. The image is too deep by a couple of pixels. This makes certain types of page layout look quite bad. The following demonstrates the bug nicely. The table height should be the same as the image height (it works correctly on NS4/IE). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title></title> </head> <body> <table border="1" width="770" cellspacing="0" cellpadding="0"> <tr> <td width="10%"><img src="EMlogoSmall.jpg" alt="" /></td> <td style="background-color: blue" width="80%"></td> </tr> </table> </body> </html>
AFAIK it is working as it should: The default alignment of images is to align the baseline(bottom) of the image to the baseline of text. The blank space you are seeing under the image is the remaining height of the text row under its baseline. Alignment to fit snugly in the table requires align="left" "center" "top" "right"; or style="display:block" ...etc. ....or resorting to quirks mode for forgiveness on such matters.
Dupe of Bug 22274
Alignment doesn't fix it... align=top or middle changes nothing, align=bottom actually chops the top row off the image! align=left and align=right simply move the blank space to the left/right of the image respectively. I don't buy it having anything to do with fonts... that doesn't explain the effect with the left/right. It looks from the other thread there is no intention of fixing this... sigh... I'm usually against putting 'this page needs xxx browser' on pages but it looks like in this case I'll have to.
> Alignment doesn't fix it... align=top or middle changes nothing, align=bottom > actually chops the top row off the image! You should try valign instead of align (on the image, not the table) or use style="display:block". > align=left and align=right simply > move the blank space to the left/right of the image respectively. I don't buy > it having anything to do with fonts... that doesn't explain the effect with the > left/right. Because 10% + 80% < 100% ? I really think this is a dupe of bug 22274.
Ignore my comments about "valign". I mixed up CSS properties and HTML attributes.
I would suggest experimenting with line-height's and font-size's. Marking DUP *** This bug has been marked as a duplicate of 22274 ***