I have had some help from here and a few places to build out a wonderful email signature generator. Currently any filled in info goes into the live preview. What I am trying to do now is fill out the live preview via dropdown.
In this example I am trying to allow a user to choose "fax" or "mobile" for a phone type. The goal being that it simply fills in the "f:" or "m:" in the live preview. I broke the code down just to this key element so you can see. The dropdown is the only thing I am trying to solve.
Hoping someone can guide me to where to at least look for a solution. I have experimented quite a bit with no luck.
// We wrap our segment in an anonymous wrapper function to mitigate potential conflicts with any potential third party stuff.
(function() {
// Loading animation
window.onload = function() {
setTimeout(function() {
document.querySelector('.loading-screen').style.display = 'none';
}, 1000);
}
// Adding the error validation
const inputs = document.querySelectorAll('input,select'),
submitBtn = document.getElementById('generateButton'),
signatureForm = document.getElementById('signatureForm'),
mobileselectPhoneInput = document.getElementById('mobileselect_phone'),
mobilePhoneInput = document.getElementById('mobile_phone'),
mobileBlock = document.getElementById('mobile_phone_block'),
faxPhoneInput = document.getElementById('fax_phone'),
faxBlock = document.getElementById('fax_phone_block'),
inputFields = document.querySelectorAll('[data-field]'),
socialFields = document.querySelectorAll('[data-social]'),
awardFields = document.querySelectorAll('[data-award]'),
outputBox = document.getElementById('output-code-box'),
previewBox = document.getElementById('signature-block'),
getColumn = (id) => document.querySelector(`[data-column="${id}"]`);;
for (let i = 0, x = inputs.length; i < x; i++) {
inputs[i].addEventListener('blur', function(ev) {
if (!this.classList.contains('blurred')) {
this.classList.add('blurred');
}
mobileBlock.style.display = mobilePhoneInput.value !== '' ? 'inline' : 'none';
faxBlock.style.display = faxPhoneInput.value !== '' ? 'inline' : 'none';
socialFields.forEach(social => {
getColumn(social.id).style.display = social.value !== '' ? 'inline-block' : 'none';
})
}, false);
}
inputFields.forEach(field =>
field.addEventListener('keyup', (ev) => {
mobileBlock.style.display = ev.target.id === 'mobile_phone' || mobilePhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
faxBlock.style.display = ev.target.id === 'fax_phone' || faxPhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
switch (ev.target.id) {
case 'email':
getColumn(ev.target.id).href = `mailto:${ev.target.value}`;
break;
case 'office_address':
getColumn(ev.target.id).href = `https://maps.google.com/maps?q=${ev.target.value}`;
break;
case 'web_address':
getColumn(ev.target.id).href = `https://${ev.target.value}`;
break;
case 'office_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'mobile_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'fax_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
}
}, false)
);
handleForm = (ev) => {
if (signatureForm.checkValidity()) {
// minify the html to tidy up and present it for user.
outputBox.value = previewBox.innerHTML.replace(/>\s+|\s+</g, function(m) {
return m.trim();
});
document.getElementById('output-code').style.display = 'block';
} else {
// Todo - do something less obnoxious to hold their hand and tell them something is wrong maybe disable the button until valid.
alert('Missing required fields in the form.')
console.log('Missing required fields, no soup for you.')
}
};
copyCode = () => {
outputBox.select();
document.execCommand('copy');
}
})();
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
</head>
<body>
<main role="main">
<section class="expository" role="region" aria-label="expository">
<section id="generator-container" role="group">
<div style="background-color: #F2F2F2; padding: 20px; margin-right: 60px;">
<h2>1. Enter as much of the below information as you can for your email signature.</h2>
<form method="POST" action="." enctype="application/x-www-form-urlencoded" role="form" id="signatureForm">
<p id="formErrorContainer"></p>
<span class="required-mark">Name</span>
<label for="name">
<input data-field type="text" id="name" name="name" title="Enter name" placeholder="e.g. John Doe" pattern="^([^0-9]*)$" autofocus required>
<span>Enter valid name</span> <span class="success-validation-check"></span>
</label>
<span class="required-mark">Job Title</span>
<label for="position">
<input data-field type="text" id="position" name="position" title="Enter position" placeholder="e.g. Care Planner" pattern="^([^0-9]*)$" required>
<span>Enter valid title</span> <span class="success-validation-check"></span>
</label>
<span role="presentation" class="required-mark">Office Phone Number</span>
<br><br>
<p style="text-align: left; color: #373737; font-size: 12px;"></p>
<br>
<label for="office_phone">
<input data-field type="tel" id="office_phone" name="office_phone" title="Enter office phone number" placeholder="e.g. 1.855.983.4663">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<span style="font-weight: bold">Phone type</span>
<label for="mobileselect_phone">
<select data-field type="text" id="mobileselect_phone" name="mobileselect_phone" title="Mobile/fax">
<option value="None" selected>None</option>
<option value="m:">mobile</option>
<option value="f:">fax</option></select>
<span>mobile or fax?</span> <span class="success-validation-check"></span>
</label>
<label for="mobile_phone">
<input data-field type="tel" id="mobile_phone" name="mobile_phone" title="Enter phone number" placeholder="e.g. 555.123.4567">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<div id="generator-output">
<h2>2. Live Signature Preview</h2>
<br>
<br>
<hr style="height:0;border:0;border-bottom: #ddd 1px solid"><br>
<aside id="generator-output-window">
<figure id="signature-block">
<table width="525" style="width: 525px; color: #063852; font-size: 10pt;" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td style="width: 200px;" align="center" valign=middle width="200">
<img width="200" height="79" border=0 src="assets/logo.gif"><br>
<br>
</td>
<td style="width: 325px; padding-left: 20px; border-left: #888a8d 1px solid" valign=top>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td height="25" style="font-size: 14pt; font-weight: 600; font-family: georgia; color: #063852" data-column="name"></td>
</tr>
<tr>
<td style="color: #063852; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-weight: 600;" data-column="position">
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="vertical-align: middle;">
<td>
<a data-column="email" style="font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important; color: #063852 !important;"></a>
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<span style="font-size: 10pt !important; font-weight: 600;">t:</span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="office_phone"></a>
<span id="mobile_phone_block" style="display: none">
| <span style="font-size: 10pt !important; font-weight: 600;" data-column="mobileselect_phone"></span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="mobile_phone"></a>
</span>
<span id="fax_phone_block" style="display: none">
<br><span style="font-size: 10pt !important; font-weight: 600;">f: </span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="fax_phone"></a>
</span>
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="text-align: left; vertical-align: middle;">
<td style="font-weight: 600; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #063852 !important;" data-column="office_name">
<font size="2">
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<a style="text-decoration:none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="office_address"></a>
</td>
</tr>
<tr style="vertical-align: middle;">
<td>
<a style="text-decoration: none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="web_address"></a>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px">
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="525" data-column="corporate" style="display:none; width: 525px; margin-bottom: 20px;"><img src="./assets/images/Awards_Corporate.gif" alt="Franchisees Choice 2020" width=525 style="width: 525px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="vertical-align: bottom;">
<td style="padding-left: 10px; padding-right: 0px;" colspan="2">
<p><span style="text-decoration:none !important; color: #063852 !important; font-size: 10pt; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-bottom: 80px;" colspan="2" data-column="extra_legal"></span></p>
<br>
</td>
</tr>
</tbody>
</table>
</figure>
<!-- <button type="button" onclick="handleForm()" style="width:100%;max-width:100%" id="generateButton">Generate Email Signature</button> -->
<div id="output-code" style="margin-top: 2rem;display:none">
<label style="text-align:left">Copy and paste the code into your email signature:</label>
<button type="button" form="signatureForm" onclick="copyCode()" style="width:100%;max-width:100%">Copy The Code</button>
<textarea id="output-code-box" name="output-code" rows="8" style="width: 100%">
</textarea>
</div>
</aside>
</div>
</form>
</div>
</section>
</section>
<!--/ End Main Form -->
</main>
<script></script>
</body>
</html>
Related
My email signature works perfectly fine on iOS Mail in the default Light Mode.
However if you switch to Dark Mode and send an email with it, the background of the full message becomes white. The content is also touching the edge on the left hand side, which doesn't look good.
Ideally I would like the background in Dark Mode to be transparent, dark text to switch to white etc.
I have tried various things such as setting all the fonts/ backgrounds to #000000, however that didn't change anything.
Please see my code below, together with a screenshot taken in Dark Mode:
<table width="320" cellspacing="0" cellpadding="0" border="0" style="width: 320px; max-width: 320px; background-color: transparent;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="font-weight: bold; font-family: Arial, sans-serif; font-size: 16px; line-height: 19px; color: #000000;">
Joe Bloggs
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; line-height: 19px; font-size: 14px; color: #3d3c3f;">
Project Manager
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 8px;"> </td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="line-height: 18px; border-spacing: 0;">
<tbody>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Mobile" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/phone.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="tel:+4407777777777" style="font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
+44 (0)7777 777777
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Email" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/email.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a href="mailto:test#gmail.com" title="Email me" style="font-family: Arial, sans-serif; color: #0b9cab; color: #0b9cab !important; text-decoration: none !important; text-decoration: none;">
test#gmail.com
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Website" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/www.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<a
href="#"
title="Visit our website"
target="_blank"
style="font-family: Arial, sans-serif; color: #0b9cab; text-decoration: none !important; text-decoration: none;"
>
website-address.co.uk
</a>
</td>
</tr>
<tr>
<td style="padding-right: 3px; font-size: 13px;" align="center" valign="middle">
<img alt="Address" border="0" width="12" height="12" style="border: 0; height: 12px; width: 12px;" src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/address.png" />
</td>
<td style="padding-right: 3px; font-size: 13px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; padding-left: 2px; text-decoration: none !important; text-decoration: none;">
19 London Road, London,
</span>
<br />
</td>
</tr>
<tr>
<td style="font-size: 13px;" align="left" valign="middle"></td>
<td style="font-size: 13px; padding-left: 3px;" align="left" valign="middle">
<span style="font-size: 13px; font-family: Arial, sans-serif; color: #888888; color: #888888 !important; text-decoration: none !important; text-decoration: none;">
LE43 0RR, United Kingdom
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 2px; background-color: #0b9cab;"> </td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 10px;"> </td>
</tr>
<tr>
<td>
<table width="320" cellspacing="0" cellpadding="0" border="0" width="320px" style="background-color: #000000; border-spacing: 0;">
<tr>
<td valign="middle" width="90" style="width: 90px; font-family: Arial, sans-serif; font-size: 13px; color: #ffffff; padding-left: 10px;">
Follow us:
</td>
<td height="32" valign="middle" style="height: 32px;">
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0;">
<tr>
<td valign="middle">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Facebook icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/fb-2ef13da0.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Instagram icon"
title="Instagram"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/insta-3478a59b.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Pinterest icon"
title="Pinterest"
border="0"
width="16"
height="16"
style="display: block; border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/pin.png"
/>
</a>
</td>
<td valign="middle" style="padding-left: 10px;">
<a href="#" target="_blank" style="text-decoration: none;">
<img
alt="Website icon"
title="Visit our website"
border="0"
width="14"
height="14"
style="display: block;border: 0; height: 16px; width: 16px;"
src="https://irp-cdn.multiscreensite.com/2a06d0a3/dms3rep/multi/web.png"
/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="320" style="font-size:1px; line-height: 7px; background-color: #0b9cab;"> </td>
</tr>
I'm struggling to find a solution to remove the blue underline from Links on Emails Sent from Outlook (Outlook for Office 365) to Gmail (Desktop version)
The generated html works perfectly on Google Chrome, but not on Gmail
Here is the whole Code of my tests:
It was generated with mjml framework:
<!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;
}
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]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
<!-- Override Gmail blue links
-->
.ii
a[href]
{
text-decoration:
none;
color:
inherit
!important;
}
.link-nostyle
{
color:
inherit;
text-decoration:
none
}
.link-underlined
{
color:
inherit;
text-decoration:
underline
!important;
}
.link-not-underlined
{
color:
inherit;
text-decoration:
none
!important;
text-decoration-color:
transparent;
color:
green;
}
.myClass,
.myClass1
{
text-decoration:
none
!important;
color:
orange;
;
</style>
</head>
<body>
<div style>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" 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;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;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;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;text-decoration:none;color:#F45e46;">Hello Hello World</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odio impedit minus suscipit, quis autem nulla aliquam maxime optio facere, esse quia corrupti possimus expedita aspernatur modi molestiae, iusto dolore. <a style="text-decoration: underline !important; color: orange !important;" href="https://www.google.com"><span style="text-decoration: underline !important; color: red !important;">Test link 2</span></a>
<a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 2</span></a></div>
</td>
</tr>
<!-- Link underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello <span style="text-decoration: underline !important;">link underlined</span></div>
</td>
</tr>
<!-- Link NOT underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:none;color:#000000;">Hello link not underlined</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 3</span></a>
<br><br> lorem Ipsum <a href="http://www.google.com" target="_blank" style="color: red !important; text-decoration:none !important;">
<span style="color:red !important; text-decoration:none!important;">Getting Started with Our Services</span>
</a>
<br><br>
<a href="https://www.google.com" target="_blank" style="color:#CCCCCC; text-decoration:none;">
<color="#cccccc">test 4 </color="#cccccc">
</a>
<div class="myClass"> <a href="mailto:info#example.com">
<span class="myClass1">info#ccc.com </span></a> </div>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Test for numbers: 0711 12345678</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
I have tried the whole propositions from this post:
How to Remove Hyperlink underline in Gmail while sending Email template from outlook without success
All those links with underline are having an inline css for displaying underline so that's why it's still visible. And at some places anchor tags are having span as children with underline css, so although the text-decoration: none is set for the anchor tags its not working because of the span inside. I have removed that from the code and replaced it below. Please refer below for the same. Hope this solves the issue
<!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;
}
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]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<!--<![endif]-->
<style type="text/css">
#media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
<!-- Override Gmail blue links
-->
.ii
a[href]
{
text-decoration:
none;
color:
inherit
!important;
}
.link-nostyle
{
color:
inherit;
text-decoration:
none
}
.link-underlined
{
color:
inherit;
text-decoration:
none
!important;
}
.link-underlined span {
text-decoration:
none
!important;
}
.link-not-underlined
{
color:
inherit;
text-decoration:
none
!important;
text-decoration-color:
transparent;
color:
green;
}
.myClass a {
text-decoration: none;
}
.myClass,
.myClass1
{
text-decoration:
none
!important;
color:
orange;
;
</style>
</head>
<body>
<div style>
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" 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;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;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;">
<div style="font-family:helvetica;font-size:20px;line-height:1;text-align:left;text-decoration:none;color:#F45e46;">Hello Hello World</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo odio impedit minus suscipit, quis autem nulla aliquam maxime optio facere, esse quia corrupti possimus expedita aspernatur modi molestiae, iusto dolore. <a style="text-decoration: none !important; color: orange !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: red !important;">Test link 2</span></a>
<a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 2</span></a></div>
</td>
</tr>
<!-- Link underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello <span style="text-decoration: none !important;">link underlined</span></div>
</td>
</tr>
<!-- Link NOT underlined -->
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:none;color:#000000;">Hello link not underlined</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><a style="text-decoration: none !important; color: #00d0ff !important;" href="https://www.google.com"><span style="text-decoration: none !important; color: green !important;">Test link 3</span></a>
<br><br> lorem Ipsum <a href="http://www.google.com" target="_blank" style="color: red !important; text-decoration:none !important;">
<span style="color:red !important; text-decoration:none!important;">Getting Started with Our Services</span>
</a>
<br><br>
<a href="https://www.google.com" target="_blank" style="color:#CCCCCC; text-decoration:none;">
<color="#cccccc">test 4 </color="#cccccc">
</a>
<div class="myClass"> <a href="mailto:info#example.com">
<span class="myClass1">info#ccc.com </span></a> </div>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Test for numbers: 0711 12345678</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>
How it shows in Gmail
How it shows in Yahoo
Accurate Design
I've been having a problem with an email not formatting correctly for some platforms. It seems to remove images and background colors in yahoo, and just messes everything up in Gmail. Apple it is perfectly fine.
I'm not super knowledgable in code, I can just make changes but not sure what exactly to add or change to be compatible with all platforms. I think it has to do with the way background colors and pictures are coded.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting">
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<!-- CSS Reset : BEGIN -->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style type="text/css">
html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} html,body{
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
background:#f1f1f1;
}
*{
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
div[style*=margin: 16px 0]{
margin:0 !important;
}
table,td{
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}
table{
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}
img{
-ms-interpolation-mode:bicubic;
}
a{
text-decoration:none;
}
[x-apple-data-detectors],.unstyle-auto-detected-links *,.aBn{
border-bottom:0 !important;
cursor:default !important;
color:inherit !important;
text-decoration:none !important;
font-size:inherit !important;
font-family:inherit !important;
font-weight:inherit !important;
line-height:inherit !important;
}
.a6S{
display:none !important;
opacity:.01 !important;
}
.im{
color:inherit !important;
}
img.g-img+div{
display:none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px){
u ~ div .email-container{
min-width:320px !important;
}
} #media only screen and (min-device-width: 375px) and (max-device-width: 413px){
u ~ div .email-container{
min-width:375px !important;
}
} #media only screen and (min-device-width: 414px){
u ~ div .email-container{
min-width:414px !important;
}
} .primary{
background:#f5564e;
}
.bg_white{
background:#ffffff;
}
.bg_light{
background:#fafafa;
}
.bg_black{
background:#000000;
}
.bg_dark{
background:rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding:12px 20px;
display:inline-block;
text-transform:uppercase;
letter-spacing:2px;
font-weight:600;
}
.btn.btn-primary{
border-radius:30px;
background:#36b1ce;
font-size:13px;
color:#ffffff;
}
.btn.btn-white{
border-radius:5px;
background:#ffffff;
color:#000000;
}
.btn.btn-white-outline{
border-radius:5px;
background:transparent;
border:1px solid #fff;
color:#fff;
}
h1,h2,h3,h4,h5,h6{
font-family:'Raleway',sans-serif;
color:#000000;
margin-top:0;
}
body{
font-family:'Raleway',sans-serif;
font-weight:400;
font-size:15px;
line-height:1.8;
color:rgba(0,0,0,.4);
}
a{
color:#f5564e;
}
.logo h1{
margin:0;
}
.logo h1 a{
color:#000;
font-size:20px;
font-weight:700;
text-transform:uppercase;
font-family:'Raleway',sans-serif;
}
.navigation{
padding:0;
}
.navigation li{
list-style:none;
display:inline-block;
margin-left:5px;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
.navigation li a{
color:rgba(0,0,0,.6);
}
.hero{
position:relative;
z-index:0;
}
.hero .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.hero .icon a{
display:block;
width:60px;
margin:0 auto;
}
.hero .text{
color:rgba(255,255,255,.8);
padding:0 4em;
}
.hero .text h2{
color:#ffffff;
font-size:40px;
margin-bottom:0;
line-height:1.2;
font-weight:300;
}
.heading-section h2{
color:#000000;
font-size:30px;
margin-top:0;
line-height:1.4;
font-weight:300;
}
.heading-section .subheading{
margin-bottom:20px !important;
display:inline-block;
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:rgba(0,0,0,.4);
position:relative;
}
.heading-section .subheading::after{
position:absolute;
left:0;
right:0;
bottom:-10px;
content:'';
width:100%;
height:2px;
background:#f5564e;
margin:0 auto;
}
.heading-section-white{
color:rgba(255,255,255,.8);
}
.heading-section-white h2{
line-height:1;
font-weight:300;
font-size:30px;
padding-bottom:0;
}
.heading-section-white h2{
color:#ffffff;
}
.heading-section-white .subheading{
margin-bottom:0;
display:inline-block;
font-size:30px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:300;
color:rgba(255,255,255,.4);
}
.icon{
text-align:center;
}
.services{
background:rgba(0,0,0,.03);
}
.text-services{
padding:20px 10px 0;
text-align:center;
background:#fafafa;
}
.text-services h4{
font-size:15px;
text-transform:uppercase;
letter-spacing:.5px;
color:#36b1ce;
font-weight:600;
}
.services-list{
padding:0;
margin:0 0 10px;
width:100%;
float:left;
}
.services-list .text{
width:100%;
float:right;
}
.services-list h3{
margin-top:0;
margin-bottom:0;
font-size:15px;
}
.services-list p{
margin:0;
}
.text-tour{
padding-top:10px;
}
.text-tour h3{
margin-bottom:0;
}
.text-tour h3 a{
color:#000;
}
.text-services .meta{
text-transform:uppercase;
font-size:14px;
}
.text-testimony .name{
margin:0;
}
.text-testimony .position{
color:rgba(0,0,0,.3);
}
.counter{
width:100%;
position:relative;
z-index:0;
}
.counter .overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
content:'';
width:100%;
background:#000000;
z-index:-1;
opacity:.3;
}
.counter-text{
text-align:center;
}
.counter-text .num{
display:block;
color:#ffffff;
font-size:34px;
font-weight:700;
}
.counter-text .name{
display:block;
color:rgba(255,255,255,.9);
font-size:13px;
}
ul.social{
padding:0;
}
ul.social li{
display:inline-block;
}
.footer{
color:rgba(255,255,255,.5);
}
.footer .heading{
color:#ffffff;
font-size:20px;
}
.hidden{
display:none;
}
.footer ul{
margin:0;
padding:0;
}
.footer ul li{
list-style:none;
margin-bottom:10px;
}
.footer ul li a{
color:rgba(255,255,255,1);
}
#media screen and (max-width: 500px){
.icon{
text-align:left;
}
} #media screen and (max-width: 500px){
.text-services{
padding-left:0;
padding-right:20px;
text-align:left;
}
}</style></head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #222222;">
<center style="width:100%;background-color:#f1f1f1;">
<div style="display:none;font-size:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
</div>
<div style="max-width:600px;margin:0 auto;" class="email-container">
<!-- BEGIN BODY -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="top" class="bg_white" style="padding:1em 2.5em;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="40%" class="logo" style="text-align:left;">
<h1>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/beabaa6f-844f-4ffa-9080-6391df1c3ef6.png" style="max-width:200px" alt="beabaa6f-844f-4ffa-9080-6391df1c3ef6.png">
</h1>
</td>
<td width="60%" class="logo" style="text-align:right;">
<ul class="navigation">
<li>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/ee34875d-ab9f-480d-a11e-150f8027462c.png" style="max-width:25px" alt="ee34875d-ab9f-480d-a11e-150f8027462c.png">
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td valign="middle" class="hero bg_white" style="background-image:url('https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg');background-size:cover;height:400px;">
<table>
<tr>
<td>
<div class="text" style="text-align:center;">
<h2></h2>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end tr -->
<tr>
<td class="bg_dark email-section" style="text-align:center;">
<div class="heading-section heading-section-white">
<h2>We have a new website!</h2>
<p>We're so excited to unveil our new website! Our website is now easy to navigate to our services, get a quote, and schedule your move. We're excited to give our customers a new, top notch experience to make their move as easy as possible.</p>
<p>visit the site
</p>
</div>
</td>
</tr>
<!-- end: tr -->
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="bg_white email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>All New Service Pages</h2>
<p>We've redesigned and reinvented how deliver our services. We have a general breakdown of each service, plus a detailed service page for those of you who want to learn more specific details.</p>
</div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6a5e0310-9a5a-4b52-8487-4702c8cf4fb3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Residential
</h3>
<span class="price">Services include Local Moving, Long Distance and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/e5542099-d033-42ae-8f32-c9198cdc6e00.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Collegiate
</h3>
<span class="price">Services include Dorm Store, Lease Layover, Local Moving, and Labor.</span>
</div>
</td>
</tr>
<tr>
<td style="padding-top:20px;padding-right:10px;">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/22fec672-03f3-4285-a75c-9dc4e1ef78f3.png" alt="" style="width: 100%; max-width: 100px; height: auto; margin: auto; display: block;">
<div class="text-tour" style="text-align:center;">
<h3>
Commercial
</h3>
<span class="price">Services include FF&E, Employee Relocation, Corporate Relocation, and Instutional Moving.</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- end:tr -->
<tr>
<td class="bg_white email-section" style="width:100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td>
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/6f23aa84-082e-4dba-9d2f-ca5c9fd414af.jpg" alt="" style="width: 100%; max-width: 600px; height: auto; margin: auto; display: block;">
</td>
</tr>
</table>
</td>
<td valign="middle" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="text-services" style="text-align:left;padding-left:25px;">
<div class="heading-section">
<h3>Moving Tips</h3>
</div>
<div class="services-list">
<div class="text">
<h4>1. Pack up your things</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>2. Search for Destination</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
<div class="services-list">
<div class="text">
<h4>3. Be Responsible</h4>
<p>A small river named Duden flows by their place and supplies</p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
</table>
</td>
</tr>
<!-- Leave a Review -->
<tr>
<td class="bg_light email-section">
<div class="heading-section" style="text-align:center;padding:0 30px;">
<h2>Leave us a Review!</h2>
<p>Had a good moving experience in the past? Please leave us a review on Google!</p>
<p>Leave a Review
</p>
</div>
</td>
</tr>
<!-- 1 Column Text + Button : END -->
</table>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin:auto;">
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="60%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<h3 class="heading">Follow Us</h3>
<p>Get the latest updates!</p>
<ul class="social">
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/31d75ed2-3027-49aa-b9f2-1969b2cb1f4b.png" alt="" style="width: 30px; padding-right:10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1f92f2b1-2e26-4add-acf8-b4f8c2056309.png" alt="" style="width: 30px; padding-right: 10px; max-width: 600px; height: auto; display: block;">
</li>
<li><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/63ede42c-5969-4eb5-8f64-5aa9add11cf6.png" alt="" style="width: 30px; max-width: 600px; height: auto; display: block;">
</li>
</ul>
</td>
</tr>
</table>
</td>
<td valign="top" width="40%" style="padding-top:20px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-left:5px;padding-right:5px;">
<h3 class="heading">Contact Info</h3>
<ul>
<li>
<span class="text">130 Industrial Drive<br>Birmingham,AL 35211</span>
</li>
<li>
<span class="text">205-624-4537</span>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end: tr -->
<tr>
<td valign="middle" class="bg_black footer email-section">
<table>
<tr>
<td valign="top" width="50%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:left;padding-right:10px;">
<p>© 2019 Move & Store. All Rights Reserved.</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="33%">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="text-align:right;padding-left:5px;padding-right:5px;">
<p>Unsubscribe
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I'm not sure why your hero image is a background image, but if you make it into a regular image, the hero will display in every major email client, including Gmail and Yahoo.
Try this instead:
<tr>
<td valign="middle" class="hero bg_white" style="">
<img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1698dfdb-e067-4d6d-acb8-436d9e86c3d4.jpg" width="600" />
</td>
</tr>
I pulled out the empty h2 below the image to make it simpler to display the relevant code.
Before I did this, your email hero did not display in Outlook 2007-2019. Even with changing the hero to an img, you have serious issues with this email in Outlook and other clients. I suggest more testing and development to help make sure your customers see your message.
Good luck.
Outlook 2016 is adding space between table rows in HTML email. I can't find a fix that works. Blue section on top should be one bar, not have the white gaps. Gray section on bottom should also be one footer section, not have the two white gaps in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0; line-height: 0; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0; line-height: 0; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
I fixed up issues picked by #flexlearn and add in some more code for different supported clients.
Basically these are the changes that i did:
Added display block
removed max and min height on table td
fixed font size and line height to 0px
Also you had two hrefs for the google font (now code looks better in dreamweaver)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;height:33px;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;display:block;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;display:block;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0px; line-height: 0px; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0px; line-height: 0px; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
Let me know if this works for you.
When building spacer rows, font-size and line-height must be declared as 0px (not 0).
<tr>
<td height="13" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
I figured it out.
font-size: 0; line-height: 0;
needed to be defined in pixels, and I added
valign="middle"
to each table row's data.
I replaced:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
<tr>
<td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td>
</tr>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
with:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#0072bc" height="33" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#0072bc" class=""><img alt="companyname logo" aria-hidden="true" border="0" height="54" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle"></td>
</tr>
<tr>
<td bgcolor="#0072bc" height="33" style="font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
and it now works in all clients. Same with the footer. I replaced:
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END -->
with:
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td bgcolor="#e1e1e1" border="0" class="x-gmail-data-detectors" style="vertical-align: middle; border-spacing: 0; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br>
<br>
© Copyright 2017 <span style="font-weight: bolder;">eni</span><br>
#companynameweb.com 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br>
<br>
Click here to unsubscribe</td>
</tr>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
and now it doesn't break anymore. td also needed bgcolor.
Adding this simple css style has worked for me :
<table style="border-spacing: 0 !important; border-collapse: collapse !important;"> </table>
I would like to know who can I retrieve the date from a file.
This is how I open my file:
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("checkno_2211.html"), 1)
'Need something here to find the first date MM/DD/YYYY in the file
f.Close
Set f=Nothing
Set fs=Nothing
The code above will open the .html file now I would like to find the first date that is in that file but I don't know how to do it. :-(
The .html file will have multiple dates in it, but I only need to grab the first one.
The html and format of the date is like this:
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
The source code of the .html file is
<HTML>
<HEAD>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
textarea {
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
.style1 {
text-align: center;
}
.style2 {
border-style: solid;
border-width: 1px;
}
.style3 {
color: #FFFFFF;
background-color: #000000;
}
.style4 {
background-color: #000000;
}
.style5 {
color: #FFFFFF;
}
.style7 {
vertical-align: text-bottom;
}
.style8 {
font-family: Arial, Helvetica, sans-serif;
}
.style9 {
background-color: #C0C0C0;
}
.style10 {
vertical-align: middle;
}
.auto-style30 {
text-align: center;
margin-left: 0px;
}
.auto-style32 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style35 {
background-color: #000000;
}
.auto-style36 {
border-top-style: solid;
border-top-width: 1px;
}
</style>
<script language="javascript" type="text/javascript">
function GetURL_Alpha(){
document.getElementById("currentURL").value= location.href;
}
</script>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY onload="printIt();GetURL_Alpha();" style="margin: 0 5">
<input name="currentURL" ID="currentURL" type="hidden" style="width: 1528px">
<CENTER>
<head>
<style type="text/css">
.auto-style36 {
text-align: center;
}
</style>
</head>
<TABLE border=0 style="width: 100%">
<TR>
<TD class="auto-style36">
<font face="Century Gothic">
<img src="logopro2.jpg"><BR>
</font>
<strong>
<font face="Century Gothic" size="1">111 Test Main St Los Angeles,
CA 12345 </font></strong><font face="Century Gothic" size="1">
<strong><BR>
</strong>
</font> <STRONG><FONT face="Century Gothic" size=1>PHONE: (888) 111-2222 FAX: (877)
111-2233</FONT></STRONG>
<br><br>
</TD>
</TR>
</TABLE>
</CENTER>
<table style="width: 100%">
<tr>
<td style="width: 408px"><font face="Arial">
<strong>
<h3 class="auto-style30" style="width: 492px">
FULL NAME<BR>
123 Test Ave<BR>
MIAMI, FL<BR>
</h3>
</strong>
</font>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<P align = center>
<FONT face="Comic Sans MS" size=5><span class="style8">
<HR>
<P align=center>
<TABLE border=0 style="width: 100%" cellspacing="0">
<tr>
<FONT face="Comic Sans MS" size=5><span class="style8">
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
<td style="height: 31px">Name: Someone</td>
<td class="style1" colspan="2" style="height: 31px">
<FONT face="Comic Sans MS" size=5><span class="style8">
<strong>STATEMENT</strong></td>
<TD colspan=3 align=right style="height: 31px">
Check #: 11008
</TD>
</span></font>
</tr>
<TR>
<TD colspan=7 align=center class="auto-style35">
<span class="style5"></span>
<STRONG><FONT face="Arial" size=2 color="white">
<img src="more_images/ContainerRed.png" class="style10">
MORE INFORMATION</FONT></STRONG>
</TD>
</TR>
As always,
Thanks for any help...
You could try something like this -
Dim ParseDate, NextLineIsDate
NextLineIsDate = False
Set fso = Server.CreateObject("Scripting.FileSystemObject")
set fs = fso.OpenTextFile(Server.MapPath("Saved\checkno_2211.html"), 1, true)
Do Until fs.AtEndOfStream
If NextLineIsDate Then
ParseDate = Replace(Replace(fs.ReadLine," ",""),"</TD>","")
Exit Do
End If
If Instr(fs.ReadLine,"Date:") > 0 Then NextLineIsDate = True
Loop
Response.Write ParseDate
fs.close: set fs = nothing
The code above should output the date you're searching for to the screen.
This will work providing the text Date: only appears directly above dates in your text file. If it doesn't you might need some thing more complicated but it's hard to tell without seeing all the contents of your file.