Vertically aligning an image in a td isn't working

Question

I have four table cells, two of which have one image each (the other two cells aren't related to my problem, AFAIK). I am trying to vertically align the smaller image at the top of its table cell. I have tried using vertical-align:top for the image within the table cell, and it isn't working. I am unsure as to why, as I cannot see anything that would cause the issue (using Firebug).

<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></a></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>

The demo site in question is here. http://www.josephruscitti.com/clients/jimmyclanton/store/ There are three rows of content all together on the table in this page, the row I'm having trouble in is the second row.

Answer 1

You need to apply the vertical align to the td like so:

<table class="store-table">
  <tr>
    <td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td>
    <td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
  </tr>
  <tr class="pics">
    <td style="width: 25%; vertical-align:top;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td>
    <td style="width: 25%;">$15.00</td>
    <td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></a></td>
    <td style="width: 25%;">$20.00</td>
  </tr>
</table>

By the way, applying css inline to every table cell is not a great method. You'd be better using separate CSS for some of this. For example:

.store-table td { width: 25%; }