outlook html email tables mis-aligned
Question
I've got an Outlook 07/10 table alignment issue that I just can't seem to solve...
Here's what it looks like: http://postimg.org/image/lrizj0h0t/ and obviously the buttons are supposed to line up (ignore the weird text alignment - it's because it's been photoshopped very very quickly for anonymity!!)
I've tried adding extra tables around it, tried making the buttons narrower, tried adding valign to various parts of it (including the table it's in). I thought it might be the 'fun' "Outlook is really Word" rendering issue where it's adding a page break, but doesn't appear to be (in that none of the solutions I'd found to fix that, like adding extra tables to make it separate tables and thus not as long, have worked)
Here's the code (i've not included the html body etc tags, but rest assured, they're there.
<style type="text/css"> body{-webkit-text-size-adjust:none;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} #outlook a{padding:0;} .showonmobile { display: none!important; } @media only screen and (max-width: 480px) { table[class="main"] { width: 300px!important; } table[class="centermob"] { text-align: center!important; width: 300px!important; } td[class="hideonmobile"] { display: none!important; } table[class="hideonmobile"] { display: none!important; } tr[class="hideonmobile"] { display: none!important; } img[class="hideonmobile"] { display: none!important; } table[class="showonmobile"] { display: initial!important; } td[class="showonmobile"] { display: initial!important; } img[class="halfwidth"] { width: 300px!important; } table[class="halfwidth"] { width: 300px!important; } td[class="halfwidth"] { width: 300px!important; } table[class="hidespace"] { display: none!important; } table[class="thirdwidth"] { width: 48%!important; } img[class="onethirdleft"] { width: 48%!important; } img[class="onethirdright"] { width: 48%!important; } table[class="thirdwidthcontact"] { display: none!important; } table[class="thirdwidthwhy"] { width: 300px!important; } td[class="centralise"] { text-align: center; } span[class="showlinebreak"] { display: initial!important; } table[class="hidingonweb"] { display: initial!important; } td[class="nav"] { width: 206px!important; } table[class="twocol"] { width: 300px!important; } img[class="oneninethrees"] { width: 140px!important; } table[class="bottombuttonright"] { width: 140px!important; float: right!important; display: inline-block; } table[class="bottombuttonleft"] { width: 140px!important; float: left!important; display: inline-block; } td[class="bottombuttoninner"] { width: 82px!important; font-size: 13px!important; } table[class="bottombuttoninner"] { width: 82px!important; font-size: 13px!important; } td[class="smallerfont"] { font-size: 13px!important; } } </style>
<table cellpadding="0" cellspacing="0" class="twocol" style="width: 620px; background-color: #ffffff; border-collapse: collapse; empty-cells: show;"> <tbody> <tr> <td valign="top" align="center"> <table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="empty-cells: show; border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="137"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> <table align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table> <!--[if mso]></td><td><![endif]--> <table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="137"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> <table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table> <!--[if mso]></td><td><![endif]--> <table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="137"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> <table align="left" class="showonmobile" width="20" style="font-size: 15px;"><tr><td> </td></tr></table> <!--[if mso]></td></tr><tr><td><![endif]--> <table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="137"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> <table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table> <!--[if mso]></td><td><![endif]--> <table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="137"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> <table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table> <!--[if mso]></td><td><![endif]--> <table height="55" align="left" valign="top" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:193px; color: #ffffff; width:193px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="193"> <tbody> <tr> <td align="left" valign="top" height="40" width="22"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p> </td> <td class="bottombuttoninner" align="left" valign="top" height="40" width="135"> <table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="135"> <tbody> <tr> <td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p> </td> </tr> </tbody> </table> </td> <td align="left" valign="top" height="40" width="36"> <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p> </td> </tr> <tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr> </tbody> </table> </td> </tr> </tbody> </table>
Any ideas gratefully received!!
1 answers
solution1
0 ACCPTED 2015-08-20 10:46:54
You need to put tds around all elements for outlook. There are several points at which you just have 2 table elements in one td. Another problem with Outlook is you can't completely hide a table, so even the showonmobile table you have needs to be in its own td. I noticed you used <!--[if mso]> to add your tds for outlook. You should just have tds on all platforms as it's good practice for emails.
Here's the amended code (using <!--[if mso]> for the tds):
<table cellpadding="0" cellspacing="0" class="twocol" style="width: 620px; background-color: #ffffff; border-collapse: collapse; empty-cells: show;">
<tbody>
<tr>
<td valign="top" align="center">
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="empty-cells: show; border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="showonmobile" width="20" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td></tr><tr><td><![endif]-->
<table align="left" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table align="left" class="bottombuttonright" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:195px; color: #ffffff; width:195px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="195">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="137">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="137">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
<!--[if mso]></td><td><![endif]-->
<table class="hideonmobile" align="left" width="17" style="font-size: 15px;"><tr><td> </td></tr></table>
<!--[if mso]></td><td><![endif]-->
<table height="55" align="left" valign="top" class="bottombuttonleft" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:193px; color: #ffffff; width:193px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #ffffff;" width="193">
<tbody>
<tr>
<td align="left" valign="top" height="40" width="22">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank"><img height="40" src="ctaleftwhite.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" /> </a></p>
</td>
<td class="bottombuttoninner" align="left" valign="top" height="40" width="135">
<table class="bottombuttoninner" border="0" cellpadding="0" cellspacing="0" height="40" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt;" valign="middle" width="135">
<tbody>
<tr>
<td class="smallerfont" height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text here</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" valign="top" height="40" width="36">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;"><a href="#" target="_blank"><img height="40" src="ctarightwhite.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" /> </a></p>
</td>
</tr>
<tr><td colspan="3" style="font-size: 15px; background-color: #ffffff;"> </td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Image is mis-aligned on ~30% of page loads
html rows mis-aligned with simple_form 2.1.2 and bootstrap 3/Rails 3.2
HTML & CSS: My form causes all other elements in it's parent container to become mis-aligned
Best way to deal with mis-aligned header and main due to scrollbar
CSS inset box shadow on table cell is mis-aligned
jsp:include making the divs mis-aligned in ie7
Div appears mis-aligned and inside another div
How to fix mis-aligned characters in Linux/osx Firefox when using Helvetica
HTML tables stacking in outlook email
HTML Email spaces between tables (Gmail and Outlook)
Related Tags