Text Sitting Middle of Cell, will not move up

Question

I have the following code:

<table border="0" cellspacing="0" cellpadding="0" width="130" align="left">
<tbody>
<tr>
<td><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank"><img style="border: 1px solid #666; border-radius: 5px; display: block;" src="http://s.wldcdn.net/newsletters/uploads/assets/000/026/770/336cc11b947060b2ef2bf68ddc2f0c05_original.jpg?1372264611" alt="" width="145" /></a></td>
</tr>
<tr>
<td width="130" height="16">
<p style="text-align: center; font-size: 15px; font-family: Arial, Helvetica, sans-serif;"><span style="text-decoration: underline;"><strong><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank">George</a></strong></span></p>
</td>
</tr>
</tbody>
</table>

I don't know why or to fix the name appearing in the centre of the 2nd row. I want it to appear directly below the images but cannot figure out the right combination of code to allow it to sit closer to the bottom of the image.

PS: The reason it's a table is it is part of an e-mail newsletter.

Any help would be greatly appreciated.

Please clarify: "I want it to appear directly behind the images..." does this mean the image overlaps the text? — Marc Audet, Jun 27 '13 at 14:56
Be aware that email clients are notorious for not rendering HTML/CSS very well. Techniques that work well in modern browsers will fail miserably in email clients such as Outlook. — Marc Audet, Jun 27 '13 at 14:59
@MarcAudet I've updated to change behind to below. Apologies. — Ben, Jun 27 '13 at 15:03
Yes, I understand the constraints of HTML/CSS in e-mail. Thanks. — Ben, Jun 27 '13 at 15:03

score 1 · Accepted Answer · answered Jun 27 '13 at 15:05

Quick fix:

<table border="0" cellspacing="0" cellpadding="0" width="130" align="left">
<tbody>
<tr>
<td><a title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank"><img style="border: 1px solid #666; border-radius: 5px; display: block;" src="http://s.wldcdn.net/newsletters/uploads/assets/000/026/770/336cc11b947060b2ef2bf68ddc2f0c05_original.jpg?1372264611" alt="" width="145" /></a></td>
</tr>
<tr>
<td width="130" height="16" style="vertical-align: top; text-align: center; font-size: 15px; font-family: Arial, Helvetica, sans-serif;">
<strong><a style="text-decoration: underline;" title="View Member" href="$$app_url$$/member/profile/index.cfm?profileid=24215649&amp;wldsite=$$site_id$$" target="_blank">George</a></strong>
</td>
</tr>
</tbody>
</table>

The problem was the <p> tag which by default has top and bottom margins.

I consolidated your styles, you don't need the p or the span elements.

Also, add vertical-align: top to the table cell of interest.

You were pretty close except for the default margins on the paragraph, easy to overlook.

Fiddle demo: http://jsfiddle.net/audetwebdesign/fEPLB/

PS

I would put the <strong> around the link text instead of the link...

Text Sitting Middle of Cell, will not move up

1 Answers1