Image inside table cell breakage mockup. +3 pixels

Question

I have an html that looks so simplistic:

<tr> <td width="500px"> <ul class="menu_up"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/services/services-list">Services</a></li> <li><a href="/links">Links</a></li> <li><a href="/contact">Contact</a></li> </ul> </td> <td width="375"> <img src="/images/11_03.gif" alt="" height="39"/> </td> </tr> 

Website URL: jdemkovitchcpa.com

In compatibility mode, the table cell with the image expands the row to 42 pixels, thereby violating the layout (should be 39).

I checked in the developer tool and see nothing wrong with that. The image is indeed 39. Table 42. Table. The table cell with UL is also 39, but has 2 offsets.

If I delete the image from the cell, it will become 39. If I delete UL, it will remain 42.

Offset Screenshot:

Screenshot of image layout:

Screenshot of placing an image in a cell:

Answer 1

This is most likely because the image element is an inline element. It is displayed as a block in a text line, and the default alignment is that it is placed on the base line of the text line. Since there is a groove under the base line (to allow for hanging characters such as g and j), there is some distance between the bottom of the image and the bottom of the text block.

Try making the image a block element and see if it fixes the gap:

 <img src="/images/11_03.gif" alt="" height="39" style="display:block;"/> 

(The style, of course, will go in your stylesheet if it works.)