This question already has an answer here:
Wrong display of html e-mail in Outlook
(1 answer)
Closed 4 years ago.
I'm trying to create a html based email signature with tables.
It's definitely working in html, works when I copy and paste into gmail, however when I copy into Outlook, the CSS break. Did I do something wrong here?
<table style="width: 500px; font-size: 12pt; font-family: Arial,sans-serif; line-height:normal;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width:86px; vertical-align:middle;" valign="middle">
<img border="0" alt="Logo" height="auto" width="148" style="width:148px; height:auto; border:0;" src="https://i.imgur.com/1HlZfl8.png">
</td>
<td style="width:45px; text-align:center; vertical-align:middle;" valign="middle">
<div style="margin-left:15px"><img src="https://i.imgur.com/mNNR1Ga.png"></div>
</td>
<td style="width:500px; vertical-align:middle;" valign="middle">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="font-size:12pt; font-family: Arial, sans-serif; color: #3d3c3f; padding-bottom:3px;"><span style="font-weight: bold; font-family: Arial, sans-serif; color:#3c3c3b;">Jessica Smith</span>
<span style="font-size:9pt; font-family: Arial, sans-serif; color:#3c3c3b;"> | CEO/Founder</span></td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">t </div>(07) 3281 0000</span><span style="font-family: Arial, sans-serif; color:#3c3c3b"></span><span style="font-family: Arial, sans-serif; color:#3c3c3b; margin-left:10px;"><div style="font-weight:bold; display: inline-block; width: 15px;">f</div>(07) 3281 0000</span>
</td>
</tr>
<tr>
<td width="20px" style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b; "><div style="font-weight:bold; display: inline-block; width: 15px;">e </div>info#domainnamehere.com.au</span>
</td>
</tr>
<tr>
<td style="font-size:9pt; font-family: Arial, sans-serif; color: #9b9b9b; padding-bottom:1px;"><span style="font-family: Arial, sans-serif; color:#3c3c3b;"><div style="font-weight:bold; display: inline-block; width: 15px;">w </div>domainnamehere.com.au</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width:500px; padding-top:16px;" colspan="3" width="500">
<img border="0" alt="Banner" width="500" style="width:500px; height:auto; border:0;" src="https://i.imgur.com/NBxWjRC.png">
</td>
</tr>
</tbody>
</table>
Gmail Screenshot
Outlook Screenshot
Not sure what's going on.
Email clients does not strictly follow HTML Standards. The viewing technology of a typical email client isn't as up-to-date as a web browser. You need to be careful about that. HTML code works in your browser may not work on Email Clients.
You may want to read Mailchimps Article and visit this link for the CSS Support
Related
I'm trying to send email newsletters, and the padding are all wrong on outlook. here is my code:
<div style="height: 600px; overflow:hidden;">
<table style="width: 520px;" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td width="500">
<table style="width: 250px;" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px;"><i>bla bla | adadadsd</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/563de7a4-ca7d-462a-88be-1cd31ef21fc4.jpg" style="padding-bottom:10px;" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px; mso-line-height-rule:exactly;">adad is the way to go!</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">................</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">ajksdhajkh ajhdkajhd hdkahdkahdkah hdkahdkahdkja adajhdakjdkahd asdadhkad ahdkahdkadhkadha Obradovic. Uadd has been certified adad APP, and is ready to implement best practice on all 3244 projects.
</p>
</td>
</tr>
<tr>
<td>
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60">
</td>
</tr>
</tbody>
</table>
<table style="width: 250px;" cellpadding="0" border="0" align="right">
<tbody>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; line-height: 1.5; color: #cccccc; margin: 0px; text-decoration:none; margin:0;"><i>adad | asda.org</i></p>
</td>
</tr>
<tr>
<td><img createnew="true" src="https://multimedia.getresponse.com/getresponse-zMTNQ/photos/a6042f20-f80a-4826-830b-eb482d49280c.jpg" width="250" height="250"></td>
</tr>
<tr>
<td>
<h3 style="font-family: Helvetica Neue, Arial; font-size: 18px; line-height: 1.5; color: #194845; margin: 0px;mso-line-height-rule:exactly;">adadd in Eastern Europe</h3>
</td>
</tr>
<tr>
<td>
<p style="font-family: Helvetica Neue, Arial; font-size: 12px; color: #c69a5b; margin: 0px;">adad leads in asdasdad the asdad adada!</p>
</td>
</tr>
<tr>
<td height="27"><img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/linetitle.png" width="53" height="6"></td>
</tr>
<tr>
<td valign="top" height="139">
<p style="font-family: Helvetica Neue, Arial; font-size: 14px; line-height: 1.5; color: #222222; margin: 0px;">jahdajkd adwrkjq akjdadka ajdajhd akjdkhr wrwr wrwrakn kajdalkjd jakljdaljd akljdjeor kadjlqldm lajkdjojd akljd jdks ks akdj of 2019!</p>
</td>
</tr>
<tr>
<td>
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:4%;" width="250" height="60">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
The button on the right ends up higher than the one on the left. How would you make them aligned on outlook?
I've tried replacing margin's with padding's but still no lock. I used % instead of px too.
It looks fine when i view it on a browser too.
Email development is NOT html development. Your web browser supoorts a different set of features than an email client like IOS, Gmail, Outlook and others, even if you view your emails through that web browser.
Outlook has spotty support for padding.
https://www.campaignmonitor.com/css/box-model/padding/
padding-top does not work at all with Outlook 2013-2019. Move the padding off the images and into the parent td.
<tr>
<td style="padding: 10px 0 0 0;">
<a href="https://adad.co/2019/03/29/well-is-the-way-to-go/" target="_blank">
<img createnew="true" src="http://newsletter.etiketa-dev.xyz/nl-27/cta1.jpeg" style="padding-top:6%;" width="250" height="60"></a>
</td>
</tr>
In addition, Outlook has spotty support for % values. I used a padding of 10px instead.
Last, Outlook 2007-2019 is never going to support Helvetica Neue, since it's a webfont and it has spotty support for webfonts with a space in the name. Arial is not a good fallback. Consider something like Trebuchet MS instead.
Good luck.
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}
So, I'm trying to make a email template with a table.
I have the following table right under the body tag
<table style="padding-top:0px; max-width: 650px;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td height="10" style="width: 650px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody width="100%">
<tr width="100%">
<td width="2.5%"> </td>
<td width="22%" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
<td width="40%" style="text-indent: 4%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
<td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
<td width="13%" style="text-indent: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
And it looks just the way I want in Outlook (desktop, mobile portrait, mobile landscape). And it looks fine in gmail on the desktop and in mobile landscape.
But if you open it in gmail on mobile portrait, the td's are pretty bunched up on the left hand side.
Anyone know why? If it matters, I'm testing in the gmail app on a Nexus 5 phone.
Try this:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" style="padding-left:3%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">AAAA AAAA</td>
<td width="40%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">BBBB</td>
<td width="22%" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">CCC</td>
<td width="13%" style="padding-left: 4.5%; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold;">DDDDD</td>
</tr>
</table>
Not sure if text-indent works, but padding does. If you want a max-width fluid layout, wrap it inside this fluid template example
I'm working on an email HTML template and I sent a test to my gmail account. I specified every <td> element's width and made sure all the <td> width in a row add up to exact the table width. But it seems to me that gmail always adds or deletes some decimal number for the td width I specified, which results in a little mismatch between the table width and the overall td width. And this mismatch will show a small gap between the border of the table and the last td in a row, which is kind of annoying to me. Does anybody know how to fix this issue?
Actually this mismatch only happens in gmail. Hotmail and yahoo don't have this problem.
The code is as follows:(there are some Chinese characters in it and you can just ignore them)
<table width="650" cellpadding="0" cellspacing="0" style="border: 10px solid black;">
<tr>
<td style="width: 18px; font-size: 30px; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
<td width="297" style="vertical-align: top;">
<table width='297' cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="175" style="width: 297px; height: 175px; line-height: 175px; max-height: 175px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
让<span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; font-weight: bold;">Bomoda</span>
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
</td>
</tr>
<tr>
<td colspan="2" height="31" style="width: 297px; height: 31px; line-height: 31px; max-height: 31px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; color: #000001; text-align: left; line-height: normal;">
<span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; ">Bomoda</span>Newsletter
</td>
</tr>
<tr>
<td colspan="2" height="36" style="width: 297px; height: 36px; line-height: 36px; max-height: 36px;">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
<tr>
<td width="116">
<a href="http://www.bomoda.com" target="_blank" style="display: block; text-decoration: none;">
<img border="0" src="http://m.bomoda.com/static/img/email/retention_email/button.jpg" alt="" style="display: block; width: 116px; height: 27px;" />
</a>
</td>
<td width="181">
<img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />
</td>
</tr>
</table>
</td>
<td width="315">
<img border="0" alt="Bomoda" style="display: block; width: 315px; height: 458px;" src="http://m.bomoda.com/static/img/email/retention_email/A.jpg" />
</td>
</tr>
</table>
As you can see, the 650-width table only have one row with three td in it. Their widths are 18, 297 and 315 respectively, which is equal to 630 in total(taking into account the table has 10-width border on the left and right). But when I use developer tools in chrome to see the width of each td, it shows me the calculated width of each td is 17.27272605895996, 296.3636169433594 and 315.45452880859375 respectively, which could not add up to 630. So there will be a small gap between the table border and the rightmost picture.
Try putting an empty row with 2 cols above all the colspan'd rows. Sometimes you can have issues when you don't specify the col widths in the first row of the table.
Not sure if this will fix your issue, but I've had issues in the past with not setting the col widths first...
i am trying to set a global font in an email. The Mail is built using tables to keep compatibility but there is one table that just does not accept my styles. What I have done:
{literal}
<style>
*,table, div, p, td, tr, #tabledetails, .tabledetails {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
color: #000000;
font-size: 12px;
}
</style>
{/literal}
...
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">...
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>
So as you see I tried about everything i could to set the font (and not use Times New Roman like Outlook loves to do) but it still doesnt work. What else can i possibly do?
---- edit ----- complete email ----
<link href="{$_system_mail_css}" type="text/css" rel="stylesheet">
{literal}
<style>
*,table, div, p, td, tr, #tabledetails, .tabledetails {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
color: #000000;
font-size: 12px;
}
</style>
{/literal}
<table cellpadding="0" cellspacing="0" class="email_container" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<tr>
<td colspan="3" class="email_toplogo">
<div class="email_toplogo"><img src="{$_system_logo_url}" /></div>
</td>
</tr>
<tr>
<td class="email_table_left_bg" valign="top">
<div class="email_table_left"></div>
</td>
<td class="email_table_center_bg" valign="top">
<div class="email_content">
<h1>Hallo {$order_data.delivery_firstname} {$order_data.delivery_lastname},</h1>
<p>vielen Dank für Ihre Bestellung im Onlineshop von super cool company name i shouldnt tell anyone ;).
Wir werden Ihre Bestellung schnellstmöglich ausführen. Sie bekommen bei jeder Statusänderung Ihrer Bestellung eine automatisch generierte Email.</p>
<hr>
<P>Nachfolgend finden Sie Ihre Bestelldetails zur Kontrolle:</p>
<p>{txt key=TEXT_ORDER_NUMBER}: {$order_data.orders_id}</p>
<p>{txt key=TEXT_ORDER_DATE}: {$order_data.date_purchased}</p>
<p>E-Mail: {$order_data.customers_email_address}</p>
<table cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
<tr>
<td style="width: 250px;">
<div class="shippingaddress">
<h2>{txt key=TEXT_SHIPPING_ADDRESS}</h2>
<p>{if $order_data.delivery_company}
{$order_data.delivery_company}<br />
{/if} {$order_data.delivery_firstname} {$order_data.delivery_lastname}<br />
{$order_data.delivery_street_address}<br />
{if $order_data.delivery_suburb} {$order_data.delivery_suburb}<br />
{/if} {$order_data.delivery_postcode} {$order_data.delivery_city}<br />
{if $order_data.delivery_state}{$order_data.delivery_state}
{/if}{$order_data.delivery_country}<br />
</p>
</div>
</td>
<td>
<div class="paymentaddress">
<h2>{txt key=TEXT_PAYMENT_ADDRESS}</h2>
<p>{if $order_data.billing_company} {$order_data.billing_company}<br />
{/if} {$order_data.billing_firstname} {$order_data.billing_lastname}<br />
{$order_data.billing_street_address}<br />
{if $order_data.billing_suburb} {$order_data.billing_suburb}<br />
{/if} {$order_data.billing_postcode} {$order_data.billing_city}<br />
{if $order_data.billing_state}{$order_data.billing_state}
{/if}{$order_data.billing_country}<br />
</p>
</div>
</td>
</tr>
</table>
{if $payment_info}<hr><h2>{txt key=TEXT_PAYMENT_INFOS}</h2>
<p>{$payment_info}</p>{/if}
<hr>
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
<tr class="headerrow">
<td class="left">{txt key=TEXT_QTY}</td>
<td class="left">{txt key=TEXT_ARTICLE}</td>
<td class="left">{txt key=TEXT_PRODUCTS_MODEL}</td>
<td class="right">{txt key=TEXT_SINGLE_PRICE}</td>
<td class="right">{txt key=TEXT_TOTAL_PRICE}</td>
</tr>
{foreach name=aussen item=order_values from=$order_products}
<tr class="{cycle values="contentrow1,contentrow2"}">
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_name}</strong></td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_model}</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_price.formated}</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_final_price.formated}</td>
</tr>
{$order_values.products_information.html_content}
{/foreach}
<tr>
<td colspan="5" align="right" class="subtotal">
<div align="right">
<p>{txt key=TEXT_SUB_TOTAL}: {$total.product_total.formated}</p>
{foreach name=aussen item=order_total_values from=$order_total_data}
<p>{$order_total_values.orders_total_name}:
{$order_total_values.orders_total_price.formated}</p>
{/foreach} {foreach name=aussen item=tax_data from=$total.total_tax}
<p>{txt key=TEXT_TAX} {$tax_data.tax_key}%:
{$tax_data.tax_value.formated}</p>
{/foreach}
<p><span class="doubleline">{txt key=TEXT_TOTAL}: {$total.total.formated}</span></p>
</div>
</tr>
</table>
</div>
<hr>
<div class="email_footer">{$_system_footer_html}</div>
</td>
<td class="email_table_right_bg" valign="top">
<div class="email_table_right"></div>
</td>
</tr>
</table>
---- edit 2 ---- the produced code for the product listing part
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
<tr class="headerrow">
<td class="left">Anzahl</td>
<td class="left">Artikel</td>
<td class="left">Art.Nr.</td>
<td class="right">Einzelpreis</td>
<td class="right">Gesamtpreis</td>
</tr>
<tr class="contentrow1">
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">1.00 x</td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">Mavic Rennradschuh Zxellium 2011 black / white / yellow mavic</strong></td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">14207</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
</tr>
<tr class="contentrow1"> <td class="right" valign="top"></td> <td class="left" valign="top"> <h3> Schuhgröße: </h3> </td> <td class="right" valign="top"></td> <td class="right" valign="top"></td> <td class="right" valign="top"></td> </tr> <tr class="contentrow1"> <td class="right" valign="top"></td> <td class="left" valign="top"> 42 </td> <td class="right" valign="top"> </td> <td class="right" valign="top"> </td> <td class="right" valign="top"> </td> </tr>
<tr>
<td colspan="5" align="right" class="subtotal">
<div align="right">
<p>Zwischensumme: <span class="price"> 220,00 EUR</span></p>
<p>Nachnahme:
<span class="price"> 3,60 EUR</span></p>
<p>DHL - versichert:
<span class="price"> 0,00 EUR</span></p>
<p>inkl. MwSt. 19%:
<span class="price"> 35,70 EUR</span></p>
<p><span class="doubleline">Gesamtsumme: <span class="price"> 223,60 EUR</span></span></p>
</div>
</tr>
</table>
Outlook is a pain in the a** when it comes to email rendering.
The only safe thing to do is add a style="font-family: Verdana, Arial, Helvetica, sans-serif;" to every paragraph and div. We all know it sucks - but tell this to Microsoft...
Only use inline styles on html emails. It will be stripped out in some email clients. Gmail is one example.
You'll need to add this to every td containing text.
style="font-family: Verdana, Arial, Helvetica, sans-serif;"
As others have said, you need to flatten the style classes into inline styles on all the objects.
I had a similar problem and wrote a C# function to flatten the styles into the HTML.
Flatten CSS into HTML using C# w/ MVC