I am designing an email in Convio and for some reason the header and footer images have extra padding on the left and top/bottom (respectively) in Outlook 2010 and 2013. Here is a screen cap of how it is rendering. I've googled this and used tricks from Email on Acid and Litmus... etc. and for the life of me I can't figure out where the padding is coming from. Thought it would be helpful to maybe get another set of eyes on it. Hopefully it's something stupid that I am just missing. Thanks for the help.
Here is the code. Since it is built in Convio, there is no head or body tags because Convio does not support a full HTML email, just content within it's template.
Here is my CSS. It is mainly to help render the email correctly in Yahoo.
<style type="text/css">
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
.ExternalClass img {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
p {margin:0; padding:0; margin-bottom:0;}
h1, h2, h3, h4, h5, h6 {color: black; line-height: 100%;}
a, a:link {color:#2ba6cb;text-decoration: underline;}
span.yshortcuts { color:#000; background-color:none; border:none;}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {color:#000; background-color:none; border:none;}
a:visited { color: #005581; text-decoration: none}
a:focus { color: #005581; text-decoration: underline}
a:hover { color: #82a535; text-decoration: underline}
table {margin:0; padding:0;}
img {display:block; margin:0; padding:0;}
#cv-poweredBy {visibility: hidden;}
</style>
Here is my HTML.
<div align="center">
<!-- BLUE BACKGROUND -->
<table style="background-color: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; table-layout: fixed; margin: 0 auto; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#005581">
<tr>
<td valign="top">
<!-- TOP LINKS -->
<center>
<table style="background: #005581; color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="font-size: 14px; padding-top: 30px; padding-bottom: 30px;" align="center">
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/TellAFriend">Forward to a friend</a>
<a style="color: #ffffff; text-decoration: none;" href="http://[[S29:DOMAIN]]/site/MessageViewer">View Web Version</a>
</td>
</tr>
</tbody>
</table>
</center>
<!-- END TOP LINKS -->
<center>
<!-- WHITE BACKGROUND -->
<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#ffffff;">
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Header-rev.jpg" alt="Join the Fight Against Ebola This #GivingTuesday!" width="600" height="250" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" border="0"/>
</a>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;" width="600">
<p style="padding: 20px">Dear Friends,<br><br>
As we celebrate #GivingTuesday today, we are honoring four courageous nurses who are working tirelessly to keep women and families safe from a highly infectious disease devastating West Africa. <strong>Marion Subah, Comfort Gebeh, Varwo Sirtor-Gbassie and Nyapu Taylor </strong> are members of the Jhpiego family.<br><br>
As the Ebola virus swept through their native Liberia, they went to work day after day, redoubling their efforts to ensure that health care providers on the frontlines had the specialized skills in infection prevention and control to work <img style="float: right; padding: 10px;" src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-CTA.jpg" alt="Help Stop The Ebola Epidemic! Donate Now" title="Help Stop The Ebola Epidemic! Donate Now" hspace="10" vspace="10" width="225" height="300" align="right" />confidently and safely in health centers and hospitals. They also dedicated themselves to helping health facilities restore critically needed maternal and child health services so pregnant women and mothers do not die giving birth.<br><br>
These four women are respected colleagues, who, along with our dedicated staff in Ebola-impacted Guinea, are doing their utmost to prevent the needless deaths of women and their families in these countries. They embody <strong>Jhpiego's commitment to West Africa</strong>, where we have had a strong presence in both Liberia (14 years) and Guinea (21 years). Working successfully with the Ministries of Health and partners to strengthen health care systems and save lives, Jhpiego is on the ground, updating the skills of nurses and midwives so they can continue to provide quality care to vulnerable women and babies during this emergency.<br><br>
On this #GivingTuesday, as we focus on what makes <strong>Jhpiego</strong> unique, I invite you to be part of this global effort to save lives and help Marion, Comfort, Nyapu and Varwo in their prevention work. <a style="font-weight: bold; color: #99c525; text-decoration: none;" href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">With your support, we can do even more beyond #GivingTuesday! Please help us contain this epidemic by investing in Jhpiego's work.</a> Thank you in advance for your serious consideration of this special request.</p>
<center>
<table style="background: #ffffff;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="400">
<tr>
<td width="130">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/DayofGirl-LesliePhoto.jpg" alt="Photo of Leslie Mancuso" width="120" height="120" style="display:inline; padding-right: 20px;" />
</td>
<td width="270" font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #101010; text-align:left;"">
<img src="http://www.jhpiego.org/email-templates/2014-Fundraising-Emails/Leslie-Signature.gif" alt="Leslie Mancuso's Signature" width="200" style="display:inline; padding:0; margin:0;" border="0" /><br />
Leslie Mancuso, PhD, RH, FAAN<br />
President and Chief Executive Officer
</td>
</tr>
</table>
</center>
<br>
</td>
</tr>
<tr>
<td width="600" style="border-collapse:collapse;">
<a href="http://give.jhpiego.org/site/Donation2?df_id=1720&1720.donation=form1">
<img src="http://www.jhpiego.org/email-templates/2014-Holiday-Campaign/GivingTuesday/imgs/GivingTuesday-Footer.jpg" alt="Marion Subah, Comfort Gebeh, Nyapu Taylor and Varwo Sirtor-Gbassie" width="600" height="200" vspace="0" hspace="0" style="display:inline; padding:0; margin:0;" />
</a>
</td>
</tr>
</table>
<!-- END WHITE BACKGROUND -->
</center>
<!-- FOOTER -->
<center>
<table style="background: #005581; font-family: Arial, Helvetica, sans-serif;" border="0" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#005581">
<tbody>
<tr>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align:left; padding-right:50px; padding-top:25px; padding-bottom:100px; width:376px" width="376">
You are receiving this email because you have made a donation to Jhpiego in the past.<br><br>
We hate to see you go, but you can
<a style="color: #fff; text-decoration: underline;" href="http://[[S29:DOMAIN]]/site/CO">unsubscribe</a> if you no longer want to receive these messages.
<br /><br />
<strong>Don't forget to connect with us on:</strong><br /><br />
<img style="display: inline;" title="Facebook" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-facebook.png" border="0" alt="Facebook" />
<img style="display: inline;" title="Twitter" src="http://give.jhpiego.org/images/content/pagebuilder/alumni-twitter.png" border="0" alt="Twitter" />
</td>
<td style="background-color: #005581; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align:right; padding-top:25px; width:174px" width="174" valign="top">
<img src="http://give.jhpiego.org/images/content/pagebuilder/Jhpiego_logo_wh_PMS.png" border="0" alt="Visit Jhpiego's Website" width="174" height="73"/><br><br>
1615 Thames Street<br />
Baltimore, MD 21231<br />
410-537-1800
</td>
</tr>
</tbody>
</table>
<center>
<!-- END FOOTER -->
</td>
</tr>
</table>
<!-- END BLUE BACKGROUND -->
</div>
Related
I'm fairly new to this and have received some help previously with a different issue on this same code. Once I fix one issue, a new one pops up. The code so far is displaying properly across all email clients except apple mail on iphones
Here is my code. When viewed in ios - it squishes all the left hand side column and wraps text. How can I get it to display the signature at full width across ios?
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>
This is the first html email signature I''ve created and I've now discovered why I dont do them - what a pain!
It seems no matter what I do, it's not displaying correctly in one client or another.
The code I used below is displaying correctly in Android and Mac Outlook clients, however when I first upload it to outlook there is a table wrap error that I corrected by changing the table in outlook to nowrap. But now when this email signature is sent from outlook, it breaks when you look at it on ios.
I know my code probably isnt very good as it's my first time doing these. Could anybody please give me a hand to fix it??
Help me StackOverflow, you're my only hope!
Here is my code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
-->
<!--
<style>
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
</STYLE>
<tr>
<td width="0" bgcolor="#f3f3f1">
</td>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</a>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
<a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office.
<a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me.
<a href="mailto:email#domain.com.au" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
<br />
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
</a>
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold">
villagerproperty.com.au
</a>
</p>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png">
<br> <p bgcolour= "ffffff">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p> <br>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
<tr>
<td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
Thankyou #Nathan for all of your help!
Your fix worked great, however when viewing on iOswrapping error
Is this because I have the table width set at a % instead of a fixed px?
I aplogise for all the questions - I'm very new to html signatures and I seem to be having a lot of trouble!
A couple of helpful's for future:
Run your HTML through a w3c HTML validation check (and CSS, but that's less useful). There were quite a few tiny but significant errors: not closing </a> in the right place (it's inline, so close it before a block element like <p> or <br>), or not closing stuff, or forgetting quotes.
If you use https://validator.w3.org/#validate_by_input ignore all the obsolete messages (message filtering button can turn them off) - email is too old school for it!
And seriously, that was all, apart from removing a couple of redundant/empty td's/tables.
There is a possibility Outlook from Windows was messing with your code, it does that. But Outlook from Mac should be no problem.
Here is working code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
I'm having an issue with my HTML email in Outlook 2013 only, it looks great in previous versions including 2007 and 2010.
I've added style="display:block;
My table and td have a black background color.
I tried specifying width and height on the td and the img
and a line-height style as suggested on a previous post here for the containing td.
Here's the code:
<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>
Containing code:
<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
<tbody>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
<table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix’s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for “Find and Fix Faster – Your Path to More Profits,” Identifix’s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry “G” Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
<span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Diagnose and repair vehicles faster</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Reduce non-billable work time</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Boost customer trust and satisfaction</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Increase tech confidence and productivity</b></span><br>
<img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b> Stay profitable</b></span><br><br>
Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 – 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>®</sup>.<br>
<br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
</tr>
<tr>
<td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
©2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
</tr>
</tbody>
</table>
Any suggestions appreciated. Thanks,
Douglas, I tried to add an image but it says I need at least 10 reputation to post it, and I only have 1 now. The link to it is this http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG
In litmus tests only on Outlook 2013 a strange white, not even aligned gap, to the right of the image that is not supposed to be there appears.
Following worked for me :
<td style="line-height:0px; mso-line-height-rule:exactly;">
Is this problem specific to Microsoft e-mail clients?
How does the e-mail look on web clients?
I have had a wide range of problems with 2013 and sometimes 2007. These are usually remedied by using the clandestine mso-specific css rules.
For example; using mso-line-height-rule:exactly; in inline css will resolve the particularly aggravating problem of Outlook 2013 pushing all tds < 15px out.
It is hard to isolate the problem within your code without seeing the rest of the code.
You should try not to use colspans to make it work in all clients like lotus notes 6.5 and 7
I am experiencing a lot of browser inconstancies with my HTML newsletter. Are there any glaring issues you are able to diagnose just by looking through the code? For example, the newsletter has a really long height to - far beyond the content's height. This is just one specific issue.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
body, #backgroundTable{
background-color:#FAFAFA;
font-family: Arial;
}
#templateContainer{
border: 1px solid #DDDDDD;
}
p {
color: #5a5a5a;
}
a {
color: #8b8b8b;
}
h1, .h1{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h2, .h2{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3, .h3{
color:#202020;
display:block;
font-family:Arial;
font-size:16px;
font-weight:normal;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4, .h4{
color:#202020;
display:block;
font-family:Arial;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color:#FAFAFA;
}
.preheaderContent div{
color:#505050;
font-family:Arial;
font-size:10px;
line-height:100%;
text-align:left;
}
.preheaderContent div a:link, .preheaderContent div a:visited, /* Yahoo! Mail Override */ .preheaderContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#FFFFFF;
border-bottom:0;
}
.headerContent{
color:#202020;
font-family:Arial;
font-size:34px;
font-weight:bold;
line-height:100%;
padding:0;
text-align:center;
vertical-align:middle;
}
.headerContent a:link, .headerContent a:visited, /* Yahoo! Mail Override */ .headerContent a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px;
}
#templateContainer, .bodyContent{
background-color:#FFFFFF;
}
.bodyContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.bodyContent div a:link, .bodyContent div a:visited, /* Yahoo! Mail Override */ .bodyContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
height:auto;
}
.leftColumnContent{
background-color:#FFFFFF;
}
.leftColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.leftColumnContent div a:link, .leftColumnContent div a:visited, /* Yahoo! Mail Override */ .leftColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.leftColumnContent img{
display:inline;
height:auto;
}
.rightColumnContent{
background-color:#FFFFFF;
}
.rightColumnContent div{
color:#505050;
font-family:Arial;
font-size:14px;
line-height:150%;
text-align:left;
}
.rightColumnContent div a:link, .rightColumnContent div a:visited, /* Yahoo! Mail Override */ .rightColumnContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.rightColumnContent img{
display:inline;
height:auto;
}
#templateFooter{
background-color:#FFFFFF;
border-top:0;
}
.footerContent div{
color:#707070;
font-family:Arial;
font-size:12px;
line-height:125%;
text-align:left;
}
.footerContent div a:link, .footerContent div a:visited, /* Yahoo! Mail Override */ .footerContent div a .yshortcuts /* Yahoo! Mail Override */{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#social{
background-color:#FAFAFA;
border:0;
}
#social div{
text-align:center;
}
#utility{
background-color:#FFFFFF;
border:0;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
ol {
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
.letter-from-editor {
float: left;
display: inline;
color: #24ae04;
font-size: 22px;
margin-left: 40px;
}
.publication-date {
float: right;
margin-top: 0;
text-transform: uppercase;
margin-right: 20px;
font-size: 12px;
}
td.bodyContent {
padding: 25px;
}
.support {
text-align: center;
color: #24ae04;
font-size: 22px;
margin: 15px 0;
}
.continue-reading {
text-decoration: none;
}
.footer-links {
font-size: 12px;
text-decoration:none;
}
.the-footer {
width: 600px;
text-align: right;
margin:20px 0 50px 0;
}
.all-footer-links {
margin-top: 65px;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
width: 600px;
padding: 15px 0 15px 0;
text-align: right;
font-size: 12px;
color:#e8e8e8;"
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #000000;color: #FFFFFF;">
<div mc:edit="header_links" style="text-align:center;">
Having trouble viewing this email? <a target="_blank" href="*|ARCHIVE|*" target="_blank">View it in your browser</a>
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader" style="border-bottom:1px solid #e8e8e8;">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- <td valign="top">
<div mc:edit="std_preheader_content">
Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.
</div>
</td> -->
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" style="background-color: #FFFFFF;">
<div mc:edit="message" style="text-align:left; margin:30px auto; width:600px;">
<h1 style="color:#3db0df;">example's Weekly Newsletter</h1>
<p mc:edit="top-header-message" style="width:440px;display:inline;font-size:12px;line-height:140%;">Each week we'll keep you informed about features, products, and service<br>updates. Be sure to go to our <a target="_blank" href="http://www.example.com">website</a> and follow us on <a target="_blank" href="http://www.twitter.com/example">twitter</a> for more<br>frequent news in between.</p>
<img mc:edit="logo-main" style="float:right;margin-top:-55px;" src="logo.png" />
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" style="margin-top:50px;">
<tr>
<td align="center" valign="top">
<h1 mc:edit="from-the-editor" class="letter-from-editor">A letter from the editor</h1>
<p mc:edit="publication-date" class="publication-date">March 28, 2012</p>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader">
<tr>
<td class="headerContent">
<!-- // Begin Module: Standard Header Image \\ -->
<img src="header.png" style="max-width:600px;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody">
<tr>
<td colspan="3" valign="top" class="bodyContent">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="top">
<div mc:edit="std_content00">
<h2 class="h2" style="color: #3db0df;">5 Ways To Be Happy Right Now</h2>
<p>Down in the dumps. The Blues. The doldrums. No matter what you call it - sometimes, even if you are the happiest person around, you start to feel like crud.</p>
<p>This week there seems to be a crazy amount of negative info swirling around - whether it's deadly tornados or horrible rhetoric as the Republican primaries heat up (especially negative for women on this one, but I'll try to not get political!) And, I guess some of this finally got to me...so I tried everything I could to get myself out of my funk.</p>
<h3 class="h3" style="color: #3db0df;"><em>Here were the 5 things that worked the best:</em></h3>
<ol>
<li>I did a <strong>20 minute workout</strong> (mostly going for brisk walks) right after I woke up in the morning - before I started my day. No matter what happened that day, i knew i had done something good for myself. That made me happy.</li>
<li>I made sure to <strong>drink a lot of water</strong>. Dehydration is very fatiguing on the body - this fatigue can quickly turn to crankiness. So drink up!</li>
<li>I <strong>made a playlist</strong> of 'pump up' tunes. Played them on blast and repeat. I made sure to choose songs that had great memories attached and got my heart rate going. It's amazing how much dancing around your house (or apartment) totally uninhibited, can put a smile on your face!</li>
<li>Made a point to <strong>hang out with a friend that really makes me feel good</strong> - is a lot of energy and has a great sense of humor. Laughter is always the best medicine for the blues.</li>
<li><strong>Read example</strong>, of course! There is so much great stuff here, that i can always find something to cheer me up. ;) (some of those great finds are below!)</li>
<p>Hope you are having an excellent week!</p>
<p>Be well,</p>
<p>Erin</p>
</ol>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
<br>
<table>
<tr>
<td valign="top" width="275" class="leftColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border:1px solid #e8e8e8;">
<img src="bulb.png" mc:label="image" mc:edit="post1" />
<div mc:edit="tiwc300_content00" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">3 Tips for Finding Positivity in an Endlessly Negative Workplace</h4>
<p>Today’s society is riddled with negativity. Maybe it’s like this for every generation...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</8r>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
<td width="44"></td>
<td valign="top" width="275" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="400">
<tr mc:repeatable>
<td valign="top" style="border: 1px solid #e8e8e8;">
<img src="dog.png" mc:label="image" mc:edit="post2"/>
<div mc:edit="post2" style="padding:20px;">
<h4 class="h4" style="color:#3db0df;">What to Do When You Don’t Feel Like Doing Anything</h4>
<p>Where in your life is stress a noticeable concern? Maybe you get stressed out from work, family responsibilities...</p>
<a target="_blank" href="" style="text-decoration:none;color:#3db0df;">Continue Reading >></a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
</tr>
</table>
<table>
<h1 mc:edit="sponsor" class="support">example is pleased to support</h1>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color:#FFFFFF;">
<div style="width:600px;background-color:#FFFFFF;padding:10px 0;margin-bottom:70px;">
<img mc:edit="advertisement" src="ad.png" />
</div>
</table>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="600" style="background-color: #FFFFFF; border-top:1px solid #e8e8e8;">
<div class="all-footer-links" style="margin-right:20px;">
<div style="float:left;margin:-127px 0 0 0;">
<img mc:edit="footer-logo" src="logo-footer.png"/>
</div>
<div style="margin-right:10px;">
<a target="_blank" class="footer-links" href="http://www.example.com/blog/motivation/">Motivation</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/productivity/">Productivity</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/health/">Health</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/self-improvement/">Self Improvement</a> |
<a target="_blank" class="footer-links" href="http://www.example.com/blog/contact/">Contact Us</a>
</div>
</div>
<div mc:edit="footer-links" class="the-footer">
<p style="float:left;font-size:10px;margin-left:10px;">Copyright © 2012 example</p>
<div style="margin-right:10px;">
<a target="_blank" href="http://www.facebook.com/example"><img mc:edit="facebook" src="facebook.png" /></a>
<a target="_blank" href="http://www.twitter.com/example"><img mc:edit="twitter" src="twitter.png" /></a>
<a target="_blank" href="https://plus.google.com/102257056998496075187"><img mc:edit="googleplus" src="googleplus.png" /></a>
<a target="_blank" href="http://feeds.feedburner.com/example/LYVv/"><img mc:edit="rss" src="rss.png" /></a>
</div>
</div>
</table>
</center>
</body>
CSS classes are ignored by email clients. If you are using standalone clients (like Outlook Express) to view your emails, divs will also not be working (float:left will be ignored).
I suggest you to change your HTML page like -
Drop everything outside the <body>...</body>
Use <table> instead of <div>
Dont use <style> tags to define style-classes, or .css file to load styles. Instead use inline css like style="...." with the <td> / <table> containers.
Hope this helps you in email template designing.
This way you can make your email cross-browser compatible for all websites (like gmail.com) and stand-alone clients (like outlook express).
1 - Change Height to auto
#backgroundTable{height:auto; margin:0; padding:0; width:100% !important;}
2 - Add text-aligh:center to TD
<td valign="top" style="text-align:center;background-color: #FFFFFF;">
<div mc:edit="message" style="text-align:left; margin:30px auto; width:600px;">
<h1 style="color:#3db0df;">example's Weekly Newsletter</h1>
<p mc:edit="top-header-message" style="width:440px;display:inline;font-size:12px;line-height:140%;">Each week we'll keep you informed about features, products, and service<br>updates. Be sure to go to our <a target="_blank" href="http://www.example.com">website</a> and follow us on <a target="_blank" href="http://www.twitter.com/example">twitter</a> for more<br>frequent news in between.</p>
<img mc:edit="logo-main" style="float:right;margin-top:-55px;" src="logo.png" />
</div>
</td>
3 - Change Height to auto
<table border="0" cellpadding="0" cellspacing="0" height="auto" width="600" style="background-color:#FFFFFF;">
<div style="width:600px;background-color:#FFFFFF;padding:10px 0;margin-bottom:70px;">
<img mc:edit="advertisement" src="ad.png" />
</div>
</table>