Unable to remove space between td between numeric digit (td) and the background red td
https://jsfiddle.net/297zgLon/
I have tried using suggested css way of doing it i.e.
CSS
border-collapse:collapse;border-spacing:0px;
HTML
<table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> </td>
<td align="left"> TEST CASE 1 </td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; display: inline-block; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td>
</tr>
</tbody>
</table>
There should be no space between 1. and red background td(column)
removed display: inline-block; on first <td>
<table style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-spacing: 0;border-collapse: collapse;width:100%;text-align: left;border: 0px;border-collapse:collapse;border-spacing:0px;" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #177fff; text-align: right; font-weight: 600; font-family:'Open Sans', sans-serif, Arial;"> 1.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;background:red"> </td>
<td align="left"> TEST CASE 1 </td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px" class="spacerMobile8"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px; font-family:'Open Sans', sans-serif, Arial; color: #5d636a; text-align: right; font-weight: 600"> 2.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style=" color: #5d636a;font-size: 18px;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> Test case 2 tools</td>
</tr>
<tr align="left">
<td colspan="3" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;font-family: 'Open Sans', sans-serif, Arial;border-collapse: collapse;line-height:26px;font-size:26px;" height="26px"> </td>
</tr>
<tr align="left">
<td align="right" width="43" class="sectionCount" style="width: 43px; font-size: 24px;color: #5d636a; text-align: right;font-family:'Open Sans', sans-serif, Arial;font-weight: 600;"> 3.</td>
<td align="left" width="20" style="width: 20px;font-size: 14px;;background:red"> </td>
<td style="font-size: 18px;font-weight: 600; font-family:'Open Sans', sans-serif, Arial;color: #5d636a;"> Test case 3 </td>
</tr>
</tbody>
</table>
Related
In my email template, there is a gap under the "verify" image on mobile devices. I need to fix that.
It looks fine on the desktop view:
However, there is a gap in the mobile view and when I view it in my Gmail app:
Here's my code:
<td class="esdev-adapt-off es-m-p10r es-m-p10l" align="left" bgcolor="#F5F5F5" style="padding:0;Margin:0;padding-top:20px;padding-left:30px;padding-right:30px;background-color:#f5f5f5">
<table cellpadding="0" cellspacing="0" class="esdev-mso-table" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;width:540px">
<tr>
<td class="esdev-mso-td" valign="top" style="padding:0;Margin:0">
<table cellspacing="0" cellpadding="0" align="left" class="es-left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr>
<td valign="top" align="center" style="padding:0;Margin:0;width:138px">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr>
<td align="center" style="height: 340px!important;background-color: #000000;padding:0;Margin:0;font-size:0px"><img src="https://vnyfuf.stripocdn.email/content/guids/CABINET_3724de0fa275fc46223bf8a415b878d5/images/group_11.png" alt style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;height: 340px!important;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="esdev-mso-td" valign="top" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" class="es-left" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tr>
<td align="left" style="padding:0;Margin:0;width:303px">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#ffffff" role="presentation">
<tr>
<td align="left" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Merchant Industry</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#E7E6E6" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Suspected Fraud</strong></p>
</td>
</tr>
<tr>
<td align="left" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Business Existence</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#E7E6E6" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Active Business</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Demand for Product/Services</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#E7E6E6" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Applicant Credibleness</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Application Narrative</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#E7E6E6" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Remittance Availability</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>MCA Payment Histories</strong></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#E7E6E6" style="Margin:0;padding-top:5px;padding-bottom:5px;padding-right:5px;padding-left:10px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#333333;font-size:16px"><strong>Suspected MCA Kiting</strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="esdev-mso-td" valign="top" style="padding:0;Margin:0">
<table cellpadding="0" cellspacing="0" class="es-right" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">
<tr>
<td align="left" style="padding:0;Margin:0;width:120px">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#010101;background-image:url(https://vnyfuf.stripocdn.email/content/guids/CABINET_3724de0fa275fc46223bf8a415b878d5/images/group_9_pdE.png);background-repeat:no-repeat;background-position:center top"
bgcolor="#010101" background="https://vnyfuf.stripocdn.email/content/guids/CABINET_3724de0fa275fc46223bf8a415b878d5/images/group_9_pdE.png" role="presentation">
<tr>
<td align="center" style="padding:5px;Margin:0; height: 24px;
width: 108px;">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>PASS</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>FAIL</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>PASS</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>FAIL</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>PASS</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>FAIL</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>PASS</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>FAIL</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>PASS</strong></p>
</td>
</tr>
<tr>
<td align="center" style="height: 24px;
width: 108px;padding:5px;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:24px;color:#ffffff;font-size:16px"><strong>FAIL</strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
Let me know if you have any questions or need any clarification.
Without looking into it too deeply, I suspect this is due to mobile zooming, to fit it into the page (mobiles are around 300-400px wide but this is 550). Therefore, your forced height won't work.
If you have a black background behind it, I suggest that's the best way to overcome it, because it does need to respond to the reduced viewport width, and mobiles will try to automatically fix it by zooming out to fit to the available width.
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}
I am trying to generate an html email being sent to customers. It renders find in most email clients but I am experiencing issues in Outlook Express and Outlook. Basically, I am trying to reserve two lines of space for my product link (two lines to be shown even if there is only one line of text). This works fine is other clients but not in these. Additionally, in outlook express the hyperlinks are always dark blue with a text underline. How can I standardize the size of the grid boxes along with fixing the hyperlink color. The color issue only happens in outlook express. The missing images are to remove logos from the posted image, this is not an issue.
<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
<tbody>
<tr>
<td>
<table width="290" align="left" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="company" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$525</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">Name of the product being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
<table width="290" align="right" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="Logo" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$1355</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">This is an example
product description for an item being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The code used to generate these boxes are:
$html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
<tbody>
<tr>
<td border="0" class="RespoImage_TwoThirdsW" width="290"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
</tr>
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%"> </td>
</tr>
</tbody>
</table>';
I am going to give the exact row of the project description changes.
Instead of this
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
Use like this
<tr>
<td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
<span style="color:#fff;">'.$params['title'].'</span>
</td>
</tr>
I am working on a HTML newsletter/email and have a question regarding different versions of Outlook (2007, 2010, 2011, 2013). The layout I want works on all other clients we have tested (using a 'deliverability test' which displays how it would look in clients).
Link to image of the differences:
http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg
What I'm aiming for: To have the bottom of the phone sit on the last 'League point' text.
NOTE: image is set to stretch to 100%.
Outlook 2011: image is just under.
Outlook 2007, 2010: image is sitting far from bottom but the top of the image is aligned correctly.
Outlook 2013: image is way off and also there is unwanted spacing between 'League points' on the left.
Code:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile">
<tr>
<td width="100%">
<!-- Column 1 -->
<table width="257" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="left" class="imageScale1">
<tr>
<td width="100%" height="10" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">
<span class="heading" style="font-size: 22px; color: #3B80C1; line-height: 22px;">It's time <br>to step it up a gear</span><br><br>
Starting on 1st November and running through to 29th December we've got "<span class="heading" style="color: #3B80C1;">Shake It Up Rio</span>" with Samsung offering 34 people the chance to soak up the sun in Rio, Brazil! As well as having the chance to party to the Samba beat, we also have weekly Best Incentive Points for Stores and Sales Advisors to win!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">Sell the Samsung Galaxy Note 3 smartphone and Galaxy Gear smartwatch, as well as the handsets listed below to earn league points and work your way up the league table!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Note 3 and Galaxy Gear
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
10 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
5 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4 mini
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
3 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Ace 3
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
1 League Points
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Padding + (Outlook) -->
<table class="eraseForMobile" width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<tr>
<td width="0" height="2" style="font-size: 0;line-height: 0;border-collapse: collapse;"><p style="padding-left: 10px;"> </p>
</td>
</tr>
</table>
<!-- Column 2 -->
<table width="270" border="0" cellpadding="0" cellspacing="0" align="right" class="imageScale2" bgcolor="#ffffff">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" class="mobileCenter">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
Try this:
<tr>
<td width="50%" valign="top" bgcolor="#ffffff" class="mobileCenter">
... text ...
</td>
<td width="50%" valign="bottom" bgcolor="#ffffff">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
Difficult for me to test this but it should work . . .
I always find putting images into different cells for emails to be quite effective.
To fix this issue:
Simply removed the width property and gave it the necessary height to fit with the text.
Because it's a responsive email this fix isn't perfect/ideal (I've had to play around with the CSS on the image so that it scales properly), but it's a fix nonetheless.
I am stuck with the attached e-mail HTML file as it does not render properly in thunderbird, sometimes in AOL, outlook, etc... (depending on the browser).
What I was trying to do here was to display a number of profiles for a dating website. All the emails I send are responsive so I wanted it to behave this way :
- 580px wide email : 4 profiles
- Tablet version : 3 profiles
- Mobile version : 2 profiles
To achieve this, I created a table (which width will vary according to the device it's read on) and inside I put 8 small tables, expecting that when the border of the larger table is there, the next mini table would start a next line. But unfortunately it is only the case on some desktop clients & webmails, but not all of them.
Can you think of a solution to make this responsive friendly ?
Thanks in advance !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="SayDating" content="True" />
<title>E-mail</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff; }
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;}
html {width: 100%; }
table {border-spacing: 0px;}
p {margin-bottom: 0}
#media only screen and (max-width: 640px) {
body[class=responsive] .deviceWidth {width:440px!important}
body[class=responsive] .fichesannonces { width: 360px !important; }
body[class=responsive] .deviceWidth2 {width:420px!important}
}
#media only screen and (max-width: 479px) {
body[class=responsive] .deviceWidth {width:280px!important}
body[class=responsive] .fichesannonces { width: 240px !important; }
body[class=responsive] .deviceWidth2 {width:266px!important; padding: 0 0 3px 0!important;}
}
</style>
</head>
<body class="responsive">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;" valign="top" width="100%">
<table class="deviceWidth" width="580" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<table class="deviceWidth2" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="deviceWidth2" style="padding: 5px 15px 15px 15px; font-family: Tahoma, Geneva, Kalimati, sans-serif; font-size: 13px; color: #000000;" align="left">Bonjour,<br /><br />blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla :</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table class="fichesannonces" width="480" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="480">
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform: capitalize;">ville</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>