I can't seem to align the icon vertically with the text. Currently, the image icon is positioned in the middle of the <td> tag, but I want it at the top, as shown in the jsfiddle: http://jsfiddle.net/TheAmazingKnight/N6fLp/
To help visualize the spacing of each element, I added border:1px dotted blue;. By default, the td tag that encloses the img tag is centered. How can I align the img tag and title header to the very top of the table's td tag and have them aligned horizontally with the text?
I tried using vertical-align:text-top to mimic the desired result, but it didn't work. I also attempted to use position:relative on the table and set the image to top:0;, but that didn't work either. What am I missing?
HTML:
<table>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title header</strong>
<br>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<ul class="arrowLink">
<li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
</ul>
</td>
</tr>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title Header</strong><br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<ul class="arrowlink">
<li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
</ul>
</td>
</tr>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title Header</strong><br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<ul class="arrowlink">
<li><a href="javascript:showNotice('#')">View Lorem ipsum</a></li>
</ul>
</td>
</tr>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title Header</strong><br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<p>Lorem ipsum</p>
<ul>
<li>Hola <a href="javascript:showNotice('#')">Google</a><br>
<br>
</li>
<li>Include completed <a href="#" target="_blank">Lorem ipsum</a></li>
</ul>
<p>Mail to:<br>
Lorem Ipsum<br>
Attn: Lorem Ipsum<br>
1234 Main Street<br>
NY NY 12345</p>
</td>
</tr>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title Header</strong><br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</td>
</tr>
<tr>
<td><img src="http://www.newtekinsurance.com/wp-content/uploads/2012/08/icon-audience.png" alt="img.png"/></td>
<td>
<strong>Title Header</strong><br>
Lorem <a href="javascript:showNotice('#')">Lorem</a> website Lorem ipsum
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p class="small">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</td>
</tr>
</table>
CSS:
*{border:1px dotted blue;}
ul,li{padding-left:15px !important;padding:0;margin:0;}
/*table, tr, td, p{margin:0;padding:0;}*/
img{margin-right:10px;}
img{width:50px;height:50px;}