I have this "infobox" being sent in an email that is rendering well across most clients except for Outlook 2013. The text in the bottom row of the table is shifted when received by Outlook 2013?
Any ideas?
Here's my code:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style='padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;' class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</tr>
</table>
</td>
<td style='padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;'>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->
It looks like the issue was a validation error. You had the closing TR for "Live chat" below the closing TR for "Tweet us". Once moved to correct position works fine.
The other possibility is if you are talking about Outlook 2013 when viewed on a larger DPI screen (https://www.emailonacid.com/blog/article/email-development/dpi_scaling_in_outlook_2007-2013) then Outlook 'conveniently' increases the size of your text and images, but does so without truly scaling the whole email to the higher setting, which can royally screw up an email.
If the DPI scaling is your issue, I would use the above article and this recent SO question to hopefully solve your issue: Prevent Images in HTML Email Scaling Up With DPI Scaling, Outlook 2013
Below is info pulled from SO answer above:
Use inline styles and px units on tables.
You'll want to define the height using the attribute, for Gmail. Then define the height and width inline, using px. Tables that have a percentage-based width don't need any treatment, as they scale well already.
<table>
<tr>
<td height="500" style="width: 500px;height: 500px;">
</td>
</tr>
</table>
Add this to your code to make VML scale.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
Use MSO Magic for cellspacing and cellpadding.
Using these inline styles will allow you to create scalable cellspacing and cellpadding.
<table cellspacing="10" cellpadding="10" style="mso-cellspacing: 10px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>
Below is the code with the validation error fixed:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td colspan="3" style="border-left:2px solid #00A9E0;border-right:2px solid #00A9E0;text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Have a Q that needs an A?
</td>
</tr>
<tr>
<td width="250" height="30" style="padding-left:10px;border-left:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px; padding-left: 25px;">
Shipping help:
</td>
<td valign="bottom" align="center" width="2" rowspan="3" style="padding-left: 30px; padding-right: 30px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/vertical-line.png" alt="|" height="80%" width="1" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;"></td>
<td width="250" height="30" style="padding-left:10px;border-right:2px solid #00A9E0;font-weight: 700; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;color:black;vertical-align:bottom;padding-bottom:10px;">
Account questions:
</td>
</tr>
<tr>
<td style="padding-left:25px;border-left:2px solid #00A9E0;vertical-align:top;" class="temp-borders">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; -ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 888 SHIP-123
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="http://purolator.force.com/PreChat?chatLanguage=EN" target="_blank">Live Chat</a>
</td>
</tr>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="mailto:customer.care#purolator.com" target="_blank">E-mail us</a>
</td>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/twitter.png" alt="Email" height="11" width="16" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="https://twitter.com/PurolatorHelp/" target="_blank">Tweet us</a>
</td>
</tr>
</table>
</td>
<td style="padding-left:10px;border-right:2px solid #00A9E0;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding-bottom: 1px;">
1 855 711 7277 (PBRP)
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td valign="bottom" style="font-weight: 400; mso-line-height-rule:exactly; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">
<a style="text-decoration:none; color: #000000;" href="mailto:businessrewards#purolator.com" target="_blank">E-mail us</a>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 1px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20">
</td>
</tr>
</table>
<!-- End Info Box -->
Related
Occasionally, I get notified of issues from clients that the HTML email signature I created for them is collapsing upon itself in the default Apple Mail app on iOS.
This tends to only occur when I implement multiple tables on top of each other, which is necessary for designs such as the one below in order to ensure one of the tables has a complete background color, with no hairlines of white in between table cells.
Anyway, what seems to happen is the tables collapse upon each other, but I can't replicate the issue on my iPad 3 running iOS 9.3.5, which is the only Mac device I own and can test installing and sending from (I use Email on Acid to test receiving on multiple devices and platforms).
Below is an example of the issue and the underlying code... Any help would be greatly appreciated... Thanks!
How it should look vs how it sometimes looks from Apple Mail on iOS:
And here's the code for this example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="130" rowspan="4" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
</tr>
<tr>
<td width="295" style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;" width="50"></td>
</tr>
<tr>
<td width="295" valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span>
</td>
</tr>
<tr>
<td width="295" valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;">
<div nowrap style="white-space: nowrap;">
<span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com
</div></td>
</tr>
<tr>
<td width="130" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
<td width="295" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;"> </td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" height="46" bgcolor="#00aeef" valign="middle" rowspan="2" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td width="175" height="23" bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165">
</td>
</tr>
<tr>
<td width="210" height="23" bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td width="425" colspan="2" height="5" bgcolor="#3a3a3c" style="background-color: #3a3a3c; font-size: 5px; line-height: 5px;"> </td>
</tr>
</tbody>
</table>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;">
<img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="auto" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table>
</body>
</html>
Like i said in my above comment, you are using heights on td's, rowspan and colspan. Try to stay away from them. I have recoded bits and pieces of your HTML and added a few more things.
<table width="425" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="120" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
<td width="295" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;"></td>
</tr>
<tr>
<td valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span></td>
</tr>
<tr>
<td valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;"><div nowrap style="white-space: nowrap;"> <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> 345 324 3333 <span style="color: #00aeef; font-weight: bold;">•</span> Tony#AshmoreAlexander.com<br>
<span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY1-1207, Cayman Islands</span><br>
www.AshmoreAlexander.com</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#00aeef" width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
<td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;"> </td>
</tr>
<tr>
<td width="250" bgcolor="#00aeef" valign="middle" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></td>
<td bgcolor="#00aeef" align="left" valign="top" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00aeef" style="border-collapse: collapse; background-color: #00aeef;">
<tbody>
<tr>
<td bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
<tr>
<td bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"> <img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></td>
<td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
Hope this works for you.
For our company I'm creating emailsignatures (using an html code in Cloudpages for work), it works perfectly fine in gmail & Apple mail, but when you open an email in Outlook (send from Gmail in browser or Apple mail) blue lines appear around the picture.
How can I remove those blue lines?
printscreen blue lines
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly;" valign="bottom">$!photoUrl$!photoUrl<img src="$!photoUrl" alt="Foto" width="132" height="160" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<table style="width: 275px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;" align="left" valign="top" width="140">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"><span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important; color: #000001;"> <span style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;"> <!-- START NAAM --> <strong style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$personalName $personalSurname</strong><br /><em style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; line-height: 15px !important;">$orgJobTitle</em><br /><br /> <!-- EINDE NAAM --> </span> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0; width: 1px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 107px;" align="left" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/logo-vka.gif" alt="Logo VKA" width="107" height="54" /></td>
</tr>
<tr>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;" align="left" valign="bottom">
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;"><span style="text-decoration: none; color: #000001;"> <!-- START TELEFOON --> #if ($phoneMobile !="")<span style="color: #000001 !important;"><span style="color: #000001;">M $phoneMobile</span></span>#end <br /><span style="color: #000001 !important;"><span style="color: #000001;">T +31 79 368 10 00</span></span><br /> <a style="color: #000001 !important;" href="https://www.vka.nl/?utm_source=emailhandtekening" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">www.vka.nl</span></span></a> <!-- EINDE TELEFOON --> </span></p>
</td>
<td style="font-size: 0; line-height: 0; width: 10px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="10" height="1" /></td>
<td style="background-color: #0791a6; font-size: 0; line-height: 0;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 8px;" valign="top"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="1" /></td>
<td style="font-size: 0; line-height: 0; width: 70px;" align="left" valign="bottom"><!-- START SOCIAL MEDIA -->
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 34px;"><a title="LinkedIn" href="$!linkedin"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-linkedin.gif" alt="LinkedIn" width="34" height="28" border="0" /></a></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 28px; width: 73px;"><a title="Twitter" href="$!twitter"><img src="https://www.vka.nl/wp-content/uploads/2017/03/icon-twitter.gif" alt="Twitter" width="34" height="28" border="0" /></a></td>
</tr>
</tbody>
</table>
<!-- EINDE SOCIAL MEDIA --></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0; height: 18px;"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="18" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0; height: 32px;" align="left">
<table border="0" width="400" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0px; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="top" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-boven.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td class="gelebalk" style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; text-align: center; padding: 0;" align="center"><!-- START LINK -->
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; font-weight: bold;"><a style="text-decoration: underline; color: #000001 !important;" href="https://www.vka.nl/privacy-podcast/?utm_source=emailhandtekening&utm_medium=vka" target="_blank"><span style="color: #000001 !important;"><span style="color: #000001;">Ontdek onze Privacy Podcast in iTunes</span></span></a></p>
<!-- EINDE LINK --></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; width: 8px; background-color: #f6db30; padding: 0;" align="left" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="8" height="8" /></td>
</tr>
<tr>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; background-color: #f6db30; padding: 0;" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/transpunt.gif" alt="" width="1" height="8" /></td>
<td style="font-size: 0; line-height: 0 !important; mso-line-height-rule: exactly; height: 8px; width: 8px; padding: 0; background-color: #f6db30;" align="left" valign="bottom" height="8"><img src="https://www.vka.nl/wp-content/uploads/2017/03/hoekje-onder.gif" alt="" width="8" height="8" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p style="color: #ffffff;"><br /><br />.</p>
You're not seeing blue lines, I think you're seeing tiny blue text. What you're seeing is a very tiny version of this: $!photoUrl$!photoUrl. I think Outlook is ignoring the font-size:0; and possibly not processing the second URL you are adding to your code before the image.
You didn't post all of your code, but what you did post has a few issues. You didn't close the table, you didn't close the href you started before the image.
To make your table function better in Outlook, I added a few style classes that help make Outlook display a table in a better manner: border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;.
I added a style attribute display: block; which helps Outlook better display an image.
Try this code instead:
<!-- [if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<p> </p>
<table border="0" width="400" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="font-size: 0; mso-line-height-rule: exactly; line-height: 0 !important; border-collapse: collapse;" valign="bottom">
<a href="$!photoUrl" target="_blank">
<img src="$!photoUrl" alt="Foto" width="132" height="160" border="0" style="display: block;" />
</a>
</td>
</tr>
</tbody>
</table>
Let me know the results.
Good luck.
I managed to get rid of the blue line by adding text-decoration:none in the parent element.
Before:
<p>
<img src="..." />
<p>
After
<p style="text-decoration:none;">
<img src="..." />
</p>
Can anyone tell me why the rows in this layout are breaking the width? I know it's a fixed-width static layout, and it's an in-line mess, but this is what we need to use until I can develop a fluid/responsive layout.
Self-taught coder, so there's probably a lot I'm doing wrong here. The layout should be a single column, with one row at the bottom that needs 3 table cells as displayed in the snippet.
<!doctype html>
<html>
<head><title>JFG eNewsletter</title></head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" /><img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;"><img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" /></td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine, WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you're talking about the line just above your footer being slightly narrower than the rest, all you need to do is ensure a constant width for the rows of 600px by adding width: 600px inline to the relevant <tr> element:
<!doctype html>
<html>
<head>
<title>JFG eNewsletter</title>
</head>
<body>
<table width="100%" style="background-color: #E4E0D6; padding: 0px;" border="0" cellpadding="0">
<tr>
<td style="background-color: #E4E0D6; padding: 20px 0px 0px 0px;">
<table align="center" style="background-color: #FFFFFF; width: 600px; max-width: 600px; padding: 0px;" cellspacing="0" cellpadding="0">
<tr style="background-color: #72113D; width: 600px;">
<td align="left" width="60" style="background-color: #72113D; padding: 20px 20px 20px 20px; width: 60px; display: inline-block;" colspan="0">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/J-white.png" align="center" width="60" alt="JFG Logo" border="0" />
</td>
<td align="left" width="450" style="background-color: #72113D; font-family: 'open sans', san-serif; color: #FFFFFF; font-size: 24px; font-weight: bold; padding: 0px 10px 0px 10px; width: 450px; display: inline-block;" colspan="5">
Make the Most of Your Business<br />
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Banking">BANKING</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Wealth">WEALTH</a><span style="font-size: 14px;"> | </span>
<a style="font-size: 14px; color: #FFFFFF; text-decoration: none; font-weight: normal;" href="https://www.johnsonbank.com/Business/Insurance">INSURANCE</a>
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="width: 600px; max-width: 600px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/email_heo_ecoforum.png" alt="" width="600" height="200" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 10px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr style="font-family: 'open sans', san-serif; font-size: 16px; color: #454646;">
<td align="left" style="padding: 20px 20px 20px 20px;" colspan="5">
TITLE
<br />BODY TEXT HERE... Read more
</td>
</tr>
<tr>
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502935/2016_eNewsletters/WeeklyInvestmentCommentary.png" width="600" height="87" alt="" border="0" />
</td>
</tr>
<tr style="background-color: #E4E0D6; height: 138px;">
<td align="center" colspan="5">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/bizmobilebanking.png" width="600" height="138" alt="Marketing Banner Ad" border="0" />
</td>
</tr>
<tr align="center" style="background-color: #FFFFFF;">
<td align="center" colspan="5">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/articles-email.png" alt="Articles Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/calculators-email.png" alt="Calculators Logo" width="200" height="144" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/events-email.png" alt="Events Logo" width="200" height="144" border="0" />
</td>
</tr>
<tr style="background-color: #82204C; height: 15px;">
<td align="center" colspan="5"></td>
</tr>
<tr align="center" style="background-color: #72113D;">
<td align="center" width="220" style="background-color: #72113D; width: 220px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="220">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JB_HZ.png" width="100" alt="Johnson Bank Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="FB Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Twitter_001.jpg" width="32" alt="Twitter Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/YouTube_001.jpg" width="32" alt="YouTube Logo" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="170" style="background-color: #72113D; width: 170px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="170">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/JINS_HZ.png" width="100" alt="Johnson Insurance Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/facebook_001.jpg" width="32" alt="Johnson Insurance" border="0" />
</td>
</tr>
</table>
</td>
<td align="center" width="150" style="background-color: #72113D; width: 150px; padding: 10px 0px 10px 0px; display: inline-block;" colspan="1">
<table align="center" width="150">
<tr>
<td align="center" style="padding-bottom: 5px;">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/CGA_HZ.png" width="129" alt="CGA Logo" border="0" />
</td>
</tr>
<tr>
<td align="center">
<img src="http://app.subscribermail.com/images/pp/56502968/2014_Branding/Linkedin_001.jpg" width="32" alt="LinkedIn Logo" border="0" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; display: inline-block; width: 600px;">
<td align="left" valign="top" width="40" style="background-color: #82204C; padding: 20px 0px 0px 20px; width: 40px; display: inline-block;" colspan="0">
<img src="https://app.subscribermail.com/images/pp/56502935/2017_eNewsletters/EHL.png" align="center" width="31" height="32" alt="Equal Housing Lender" border="0" />
</td>
<td align="left" width="500" style="background-color: #82204C; font-family: open sans, san-serif; font-size: 7pt; color: #FFFFFF; padding: 10px 10px 10px 10px; width: 500px; display: inline-block;" colspan="5">
<strong>Johnson Bank, Member FDIC | Equal Housing Lender</strong><br />Insurance products are sold through Johnson Insurance Services, LLC and non‐depository investment products offered and sold through Johnson Bank and Cleary
Gull Advisors, an SEC registered investment adviser, are not insured by the FDIC, not a deposit or other obligation of, or guaranteed by, the bank. Non‐depository investment products are subject to investment risks, including possible
loss of the principal amount invested.<br /><br />Johnson Bank, Johnson Insurance and Cleary Gull Advisors are affiliates and subsidiaries of Johnson Financial Group.
</td>
</tr>
<tr style="background-color: #E4E0D6; font-family: 'open sans', san-serif; font-size: 7pt; color: #454646;">
<td align="left" style="padding: 10px 0px 10px 0px; display: inline-block;" colspan="5">
Unsubscribe or update your email address | 555 Main Street | Racine,
WI 53403
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hope this helps! :)
I have a table with border-left and border-right but in one section of the table it is not being applied. The table border was displaying just fine when I had a few other nested tables within. When I removed them to simplify the box, the border suddenly wouldn't apply to the bottom right corner.
Here's an image:
And here's my code:
<!-- Start Info Box -->
<table border="0" cellpadding="0" cellspacing="0" width="532" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%;">
<tr>
<td style="padding-top: 20px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-top.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td colspan="3" style="text-align: center; font-family:Arial, Helvetica, sans-serif; color: #001996; font-size: 20px; font-weight: 700; line-height: 22px; padding-top: 5px; padding-bottom: 10px;">
Why choose us?
</td>
</tr>
<tr>
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; padding-bottom: 20px; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/phone.png" alt="Phone" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px;">
1-800-YUP-1999
</td>
<td style="padding-right: 5px; padding-bottom: 5px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/chat.png" alt="Chat" height="13" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 5px; padding-right: 15px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">Live Chat</a>
</td>
<tr>
<td style="padding-right: 5px; padding-bottom: 1px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/email.png" alt="Email" height="10" width="14" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
<td style="font-weight: 400; line-height: 18px; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding-bottom: 1px;">
<a style="text-decoration:none; color: #000000;" href="#" target="_blank">E-mail us</a>
</td>
<td colspan="2" style="padding-bottom: 5px;">
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; border-left: 2px solid #00a9e0; border-right: 2px solid #00a9e0; font-family:Arial, Helvetica, sans-serif;">
<tr>
<td style="padding-top: 10px; padding-bottom: 0px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; margin: 0; font-size: 1px; mso-line-height-rule:exactly; line-height:1px; height:1px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule:exactly;line-height:7px;height:7px;">
<img src="http://purolatorforsmallbusiness.com/content/acquisition/onboarding/infotab-bottom.png" alt="" height="7" width="532" style="border: 0;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic; display: block;">
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table>
<!-- End Info Box -->
The td in question:
<td width="100%" align="left" style="margin: 0; font-family:Arial, Helvetica, sans-serif; font-size: 13px; mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: none;-webkit-text-size-adjust:100%; text-align: left; padding-left: 15px; font-weight: 400;">
is not having a right border. Add it, then it works.
Without:
https://jsfiddle.net/j5ctrrh0/
With:
https://jsfiddle.net/j5ctrrh0/1/
This is because you are using border-collapse:collapse; on the middle table. The inner table, on which you set border="0" will now collpase with the existing border, thus removing it. See here (removed collapse, changed border of the inner table to 1 so you can see, where the borders will collapse):
https://jsfiddle.net/j5ctrrh0/2/
so, with full collapsing and border=0 on the inner table, you need to set the border on the respective td.
However, iirc it is recommended to use collapse for html-emails.
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>