image issue in simple css table

[chuckmoran]

Greetings,

I have a simple 2 column table that is fine as long as I have text in it. If I replace the left header cell text with an image (not as a background image), the text in the right header cell starts on the baseline of the image and pushes the row down so there is a huge white gap under the image.

My simple css is:

#main-table {
	width: 485px;
	border-collapse: collapse;
	text-align: left;
	}
	
#main-table th {
	padding: 10px 8px;
	}

#main-table td {
	padding: 9px 8px 0px 8px;
	}

And the HTML is:

 <table id="main-table" summary="Iris">
        <thead>
          <tr>
            <th scope="col"><img src="images/iris/Iris.jpg" alt="name" width="169" height="107" /></th>
            <th scope="col"><p><strong>Iris</strong></p>
            <p>email</p>
            <p>Web Development and Publications Coordinator for Iris</p></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Previous Experience</strong></td>
            <td>NA</td>
          </tr>
          <tr>
            <td><strong>Extracurricular Activities</strong></td>
            <td>Volunteer, 
              International Student Ambassador, Interpreter</td>
          </tr>
        </tbody>
      </table>

Is the problem elsewhere in my css? Help would be appreciated!

TIA,

Chuck

[chuckmoran]

All,

I fixed it - the issue was I had a blanket css statement that included vertical-align: baseline; which included the table parameters, so it was throwing the image vs. text off.

Thanks for taking a look,

Chuck