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