Small 1px gap appears below table containing content on the left. This only appears in Outlook 2016 (Windows).
Had tried adding border-collapse:collapse, margin:0 and padding:0 but to no avail. Anyone else experienced this or dealt with it?
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
It actually wasn't a table issue, it was your TH. This is a known bug for outlook 2016. (https://mosaico.io/email-client-tricks/outlook-2016-weird-1px-horizontal-lines/)
To solve it, any TH or TD that is causing this just needs to have 'overflow:hidden' in the inline style and it should make this line disappear.
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td align="center" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#FFFFFF;">
<tr>
<td style="padding:0px 20px;">
<table align="left" cellspacing="0" cellpadding="0" border="0" width="100%" class="" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#3498db; border-radius:10px;">
<tr>
<!-- info -->
<th style="font-weight:normal; text-align:left; overflow:hidden;">
<table align="left" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="45"></td>
<td><table cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:12px; line-height:14px;">Android</td>
</tr>
<tr>
<td width="" height="5" bgcolor="" style="mso-line-height-rule: exactly; line-height: 5px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:16px; line-height:18px; font-weight:bold;">Lorem ipsum dolor sit.</td>
</tr>
<tr>
<td width="" height="10" bgcolor="" style="mso-line-height-rule: exactly; line-height: 10px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
<tr>
<td style="color:#FAFAFA; font-family: Arial; font-size:14px; line-height:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, temporibus, quis voluptatum iure recusandae amet.</td>
</tr>
</table></td>
</tr>
</table>
</th>
<!-- image -->
<th style="font-weight:normal;"><table cellspacing="0" cellpadding="0" border="0" width="245">
<tr>
<td style="padding:15px 45px 15px 0px;" align="left"><img src="http://placehold.it/200x200?text=" alt="" width="200" border="0" style="display:block;" class=""></td>
</tr>
</table></th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Per Campaign Monitor, Outlook (versions 2007-16) does not support the Overflow property.
Source: https://www.campaignmonitor.com/css/positioning-display/overflow/
Related
I'm creating a HTML email, it works fine on all the mail clients I tested except on Outlook 2016 software (works fine on Outlook website)
I tried to use td side-by-side instead of table but it's breaking my responsiveness. Tables are supposed to side-by-side splitting the email in 2 parts. In Outlook software, there is a big gap above the second table making if shifted and not aligned with the first one.
Here is my code:
<tr>
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
I'm expecting to have my 2 tables properly aligned side-by-side like I have them on all other email clients.
welcome to SO!
To do this - you will need to place the following snippet between your 2 left aligned tables:
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
Due to the nature of MSO - it doesn't support table floating, so this effectively lies to MSO and turns them into 2 columns.
<td align="center" bgcolor="#EEEEEE">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_textelement" data-title="Text" style="width: 700px; table-layout: auto;" width="700">
<tbody>
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;table-layout: auto;" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td valign="top" align="center">
<![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:350px;table-layout: auto;" width="350">
<tbody>
<tr>
<td align="center" class="em_pad_top" valign="top">
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="sbs_block h_auto" style="width: 350px; background-color: rgb(255, 255, 255);table-layout: auto;height:400px" width="350">
<tbody>
<tr>
<td bgcolor="#00865B" class="col" style="vertical-align: middle;" width="350">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td>
<p style="color: #FFFFFF; margin: 0;font-size:16px">Lorem Ipsum</p>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Just one of the many quirks with mso :)
Here's what it's supposed to look like:
Here's what it looks like in Outlook:
For some reason the "call us" table is being pushed to the next line below instead of staying in-line. I tried placing "white-space:nowrap" on tr's/td's and that didn't seem to solve my problem.
Below is the markup:
<tr>
<td>
<table id="border-1" align="left" style="border-top: 4px solid #444; border-left: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-top: 4px solid #444; border-right: 4px solid #444;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!---- top footer end --->
</table>
You could try using out Outlook conditional code since this is solely an Outlook windows issue. And then target it to whatever your dimensions are.
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="640"> <tr><td align="center" valign="top" width="318">
<![endif]-->
Side 1
<!--[if (gte mso 9)|(IE)]>
</td><td>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
You could try what Richard has suggested by adding a ghost column
<!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
Or you can try doing something similar to below:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#444444" style="padding:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff">
<table id="border-1" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- Email Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="padding: 10px; text-align: center; white-space: nowrap;">
<img width="50" src="mail.png" alt="Send Us An Email">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap; font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70">email us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="border-2" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border="0" cellpadding="0" cellspacing="0" class="100p" width="50%"> <!--- call Us Housing -->
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="50%" >
<tr style="white-space: nowrap;">
<td style="white-space: nowrap;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr style="white-space: nowrap;">
<td style=" white-space: nowrap; padding: 10px; text-align: center;">
<img width="50" src="call.png" alt="Call Us">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td style="font-size:24px; color:#414042; font-family: Open Sans, Helvetica, Arial, sans-serif; text-transform: uppercase;" class="link-bump" height="70"> call us</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have added table with 4px padding around the two blocks you have and added CSS to the table which allows you to place tables side by side in outlook:
border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;
If this doesnt work you can decrease the width of the two columns to 49% and it should work properly.
Note: decrease the width if you are using my code above.
Hope the above helps.
my problem is that after sending template mail/ saving template in chrome
e.g. to myself, when I opens it, it looks good, but after a few seconds it looks like it is loosing some css (in this particular case it is loosing borders in bottom table).
Here is the code, it was written in MJML
What is weird, if i send this template not through gmail it looks good even in gmail
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>
</title>
<!--[if !mso]> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
#media only screen and (max-width:480px) {
#-ms-viewport {
width: 320px;
}
#viewport {
width: 320px;
}
}
</style>
<!--<![endif]-->
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
</style>
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
}
.mj-column-px-300 {
width: 300px !important;
}
.mj-column-per-50 {
width: 50% !important;
}
}
</style>
<style type="text/css">
</style>
</head>
<body>
<div>
<div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:verdana;font-size:20px;line-height:1;text-align:center;color:black;">
Tytul
</div>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Desktop</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-px-300 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left;">
<th>
<h3>Mobile</h3>
</th>
</tr>
<tr style="text-align: left;">
<th style="padding: 5px;">TAG</th>
<th style="padding: 5px;">STATUS</th>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Homepage</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Category</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Search</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Offer</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Basket</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">StartOrder</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td style="padding: 5px;">Confirmation</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px;">Placebo</td>
<td style="padding: 5px;">OK</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr style="text-align: left; background-color: #e0ecff;">
<td>Comment:</td>
<td></td>
</tr>
<tr>
<td>Comment here</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td vertical-align="top" style="font-size:0px;padding:20px 0;word-break:break-word;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="Margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Rate card:</td>
<td style="padding: 5px;">RC here</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px; ">Budget:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
<td
style="vertical-align:top;width:300px;"
>
<![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
<tr style="text-align: left; border-bottom: 1px solid black;">
<td style="padding: 5px; width: 82px;">Optimization:</td>
<td style="padding: 5px;">text</td>
</tr>
<tr style="text-align: left;">
<td style="padding: 5px; width: 82px;">Banners:</td>
<td style="padding: 5px;">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Try to sent via another method. Im using Litmus, its working fine or just try to sent via mailjet - i think it should work either and its for free.
You code seems to be correct (checked via https://www.w3schools.com/Html/tryit.asp?filename=tryhtml_form_mail )
I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row.
Here is the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style type="text/css">
/***START, CSS targeting client bugs***/
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
}
.ExternalClass {
width: 100%;
/* Forces Hotmail to display emails at full width */
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
/* Forces Hotmail to display normal line spacing */
}
body {
margin: 0;
padding: 0;
/* Resets all body margins and padding to 0 for good measure */
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
/*This resolves the Outlook 07, 10, and Gmail td padding issue */
}
#-ms-viewport {
width: device-width;
}
/***END, CSS targeting client bugs***/
/***START, Reset styles***/
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
line-height: 100%;
}
/***END, Reset styles***/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: underline;
color: #0063ba;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: underline;
color: #0063ba !important;
pointer-events: auto;
cursor: default;
}
body {
overflow-x: hidden !important;
text-align: center !important;
background-color: #ffffff !important;
}
body[yahoo] .container {
width: 320px !important;
display: block !important;
}
body[yahoo] .drop {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 2px 0 !important;
}
body[yahoo] .hide_this {
display: none !important;
}
body[yahoo] .respond_to_width {
width: 100% !important;
display: block !important;
}
body[yahoo] .mobile_image {
width: 100% !important;
height: auto !important;
}
body[yahoo] .pushto100 {
width: 100% !important;
}
body[yahoo] .centerthis {
text-align: center !important;
display: inline-block !important;
}
}
</style>
</head>
<custom name="opencounter" type="tracking">
<body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
<!--CENTER EMAIL_start-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;">
Click to view this message in a browser
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width">
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_header" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone1" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone2" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone3" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone4" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone5" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone6" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_footer" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;">
%%=ContentAreaByName("Divider_Green")=%%
</td>
</tr>
<!--SOCIAL BUTTONS/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
FaceBook
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://plus.google.com/" alias="Google+" target="_blank">
Google+
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://instagram.com/" alias="Instagram" target="_blank">
InstaGram
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="http://www.pinterest.com/" alias="Pinterest" target="_blank">
Pintrest
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://twitter.com/" alias="Twitter" target="_blank">
Twitter
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--EMAIL, PHONE NUMBER/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;">
customerservice#arbitraryLink.com
<span style="font-size:14px;font-family:arial,sans-serif;color:#000001">
| 1.888.777.6666
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="drop" align="center" valign="middle">
<!--CTA BUTTON/-->
<br>
<br>
<table cellpadding="0" cellspacing="0" border="0" class="pushto100">
<tr>
<td align="left" valign="middle" style="padding:0 10px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;">
<span style="text-decoration: none;color:#88ab00;">
sign up for emails</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--<br><br>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;">
<span style="color:#333333; width:640px;">
*Terms and conditions apply
<br><br>
This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%</span>
<br>
<span style="color:#333333;">
This email was sent to: <strong>%%emailaddr%%</strong></span><span style="color:#333333;">. We respect your right to privacy -</span> privacy policy
<br>
<br>
One-Click Unsubscribe
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--CENTER EMAIL_end-->
%%[ var #additionalattribute1, #additionalattribute2, #additionalattribute3, #additionalattribute4 Set #additionalattribute1 = __AdditionalEmailAttribute1 Set #additionalattribute2 = __AdditionalEmailAttribute2 Set #additionalattribute3 = __AdditionalEmailAttribute3 Set #additionalattribute4 = __AdditionalEmailAttribute4 ]%%
<img src="http://track.securedopen-q.com/?sv_cid=0215_01811&sv_emopen=true&sv_svem=%%emailaddr%%&cm_source=tracking_pixel_stuff" height="1" width="1" />
</body>
</html>
You can see the white lines in my jFiddle when resizing the browser in chrome. http://jsfiddle.net/stormbloom/4s0sqkbb/
Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.
I discovered if I add an in-line style: outline 1px solid #f00; to the table, it fixes the white line issue. The problem is that many email clients do not support outline, but they add a space where outline is being used. So it causes the table you target to have a noticeable white space in that email client.
To fix this issue and only target iphone and devices using webkit is to create a class called .iphone and add it to a media query which targets iPhone 5, 6 and 6 plus.
#media only screen and (max-width: 414px) {
.iphone {
outline: 1px solid #f00;
}
Add the class "iphone" to the table with the white line issue. This fixes the white line issue and only shows on devices that can work with that media query. This tested with Litmus and with observing on the actual devices.
After upgrading from 1.8 to 1.9.1 the font-size of my order emails is changed for the block totals and I can't figure out how to change it.
At the moment it looks like this: http://www.pic-upload.de/view-26791263/Unbenannt.jpg.html
I would like to change the font-sie to 12px like the rest of the email text.
Here my template from the backend:
<h1></h1>
<style type="text/css">
<!--
.Stil1 {
font-size: 12px;
font-weight: bold;
}
.Stil2 {font-size: 12px}
.Stil4 {font-size: 10px}
-->
</style>
<body style="background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<footer style="background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<div style="background:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="padding:20px 0 20px 0">
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="10" border="0" width="650" style="border:1px solid #E0E0E0;">
<!-- [ header starts here] -->
<tr>
<td valign="top" bgcolor="#FFFFFF"><div align="right">
<p><img src="{{skin url="images/logo.jpg" _area='frontend'}}" alt="{{var store.getFrontendName()}}" style="margin-bottom:10px;" border="0"/>
</p>
<p>Shop Name <span class="Stil4">Shop Adress </span></p>
</div></td>
</tr>
<!-- [ middle starts here] -->
<tr>
<td valign="top" bgcolor="#FFFFFF">
<h1 class="Stil2" style="font-size:12px; font-weight:normal; line-height:22px; margin:0 0 11px 0;"">Sehr geehrte Kundin, sehr geehrter Kunde, </h1>
<p class="Stil2">Vielen Dank für Ihre Bestellung. <br>
Die Bearbeitung Ihrer Bestellung sollte innerhalb der nächsten 5-7 Tage erfolgen. Sollten Sie dann nicht von uns hören, oder keine Ware erhalten, möchten wir Sie bitten, sich mit uns in Verbindung zu setzen. </p>
<span class="Stil2">Vielen Dank, <br>
Ihr Team </span>
<p style="font-size:12px; line-height:16px; margin:0;"> </p>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<h2 style="font-size:18px; font-weight:normal; margin:0;"><span class="Stil1">Ihre Bestellung #{{var order.increment_id}} <small>(getätigt am {{var order.getCreatedAtFormated('long')}})</small></span></h2> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th align="left" width="325" bgcolor="#FFFFFF" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;"><span class="Stil2"> Rechnungsadresse:</span></th>
<th width="10"></th>
<th align="left" width="325" bgcolor="#FFFFFF" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;"><span class="Stil2">Zahlart:</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA; border-top:1px solid #EAEAEA;">
{{var order.getBillingAddress().format('html')}} <br>
{{htmlescape var=$order.getCustomerEmail()}} </td>
<td> </td>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA; border-top:1px solid #EAEAEA;">
{{var payment_html}}{{var order.customer_taxvat}} </td>
</tr>
</tbody>
</table>
<br/>
{{depend order.getIsNotVirtual()}}
<table cellspacing="0" cellpadding="0" border="0" width="650">
<thead>
<tr>
<th align="left" width="325" bgcolor="#FFFFFF" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;"><span class="Stil2">Lieferadresse:</span></th>
<th width="10"></th>
<th align="left" width="325" bgcolor="#FFFFFF" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;"><span class="Stil2">Porto:</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA; border-top:1px solid #EAEAEA;">
{{var order.getShippingAddress().format('html')}}
</td>
<td> </td>
<td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA; border-top:1px solid #EAEAEA;">Shipping Fees </td>
</tr>
</tbody>
</table>
<br/>
{{/depend}}
{{layout handle="sales_email_order_items" order=$order}} <br>
<span class="Stil2">Bestellkommentar:</span>
<p style="font-size:12px; margin:0 0 10px 0">{{var order.getEmailCustomerNote()}}</p> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
and template style:
body,td { color:#2f2f2f; font:11px/1.35em Verdana, Arial, Helvetica, sans-serif; }
this worked well before but now the size of the totals block is much bigger. Can anyone suggest me where to add the correct tag to edit the font-size?
Try adding styles to the following template:
/app/design/frontend/**base/default**/template/sales/order/totals.phtml
or check the same file to your custom theme.
Try setting the font size on your local.xml. eg:
<sales_email_order_items>
<reference name="order_totals">
<action method="setLabelProperties"><value>style="padding:6px 9px;font-size:12px;"</value></action>
<action method="setValueProperties"><value>style="padding:6px 9px;font-size:12px;"</value></action>
</reference>
</sales_email_order_items>