Image inside table cell breaking layout. +3 pixels

Question

I have html that looks like this simplified:

<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 table cell with image expands row to 42 pixels thus breaking layout (should be 39 high)

I checked in developer tool and can't see anything wrong with it. Image indeed 39. Table row 42. Table cell with UL also 39 but has 2 offset.

If I remove image from cell it becomes 39. If I remove UL it stays 42.

Screenshot of misalignment:

Screenshot of image layout:

Screenshot of cell enclosing image layout:

Answer 1

This is likely because the image element is an inline element. It's displayed as a block on a text line, and the default alignment is that it's placed on the base line of the text line. As there is a gutter below the base line (to have space for hanging characters like g and j), there is some distance between the bottom of the image and the bottom of the text block.

Try to make the image a block element and see if it fixes the space:

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

(The style would of course then go in your style sheet if it works.)