I am working on a Responsive html email template that is giving me issues when tested for Outlook Desktop Display. You'll see the table that includes the buttons at the top and the text/buttons on the 2nd half of the email are all shoved to the right. The buttons are stacking when it's not mobile -- this is desktop. I don't know what could be causing this, and have tried a bunch of ways that don't seem to fix it. VML is very important to this client, so that's why the buttons are bulletproof buttons. Also, I don't have access to Email on Acid to test on my own, because of corporate issues I guess so I have been trying fixes blind and the client is testing them and giving me the results which has not really been working to find a solution. I am sure it is something simple, but I would really appreciate some other eyes on it at this point.
<html xml:lang="en" 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>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td valign="top">
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>```
You were closing off and opening another td between the 1st and 2nd 200px width tables. Removing that should fix it for you.
<html xml:lang="en" 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>
<!--Help character display properly.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--Set the initial scale of the email.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Force Outlook clients to render with a better MS engine.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--Help prevent blue links and autolinking-->
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<!--prevent Apple from reformatting and zooming messages.-->
<meta name="x-apple-disable-message-reformatting">
<!--target dark mode-->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<!-- Allow for better image rendering on Windows hi-DPI displays. -->
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--to support dark mode meta tags-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!--to force Outlook to use specific fall back font-->
<!--[if mso]>
<style>
p, h1, h2, footer {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
mso-font-alt: ‘Arial’, sans-serif;
src: url(https://fonts.gstatic.com/s/nunitosans/v8/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
</style>
<style type="text/css">
.body-fix {
height: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
word-spacing: normal;
}
div[style*="margin:16px 0"] {
margin: 0 !important;
}
table, td {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
display: block;
margin-left: auto;
margin-right: auto;
}
p, h1, h2, h3 {
font-family:'Nunito Sans', Arial, Helvetica, sans-serif !important;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u+#body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.link:hover {
text-decoration: none !important;
}
* {
box-sizing: border-box;
}
.mobile {
display: none;
}
</style>
<!--mobile styles-->
<style>
@media only screen and (max-width: 640px) {
.contenttable {
width:220px!important;
padding:10px;
}
}
@media screen and (max-width:531px) {
.column {width: 100%;text-align:center!important;padding:10px;}
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }
.cTxt { text-align: center !important; }
.tPad-0 { padding-top: 0 !important; }
.rPad-0 { padding-right: 0 !important; }
.lPad-0 { padding-left: 0 !important; }
.bPad-30 { padding-bottom: 30px !important; }
.imgFull { width: 100% !important; height: auto !important; }
.desktop { width: 0 !important; display: none !important; }
.mobile { display: block !important; }
h1 { font-size: 35px !important; line-height: 42px !important; }
p { font-size: 25px !important; line-height: 35px !important; }
.footer {font-size:9px;line-height:11px;}
}
</style>
<!--dark mode styles-->
<style>
@media (prefers-color-scheme: dark) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
.light-img { display: none; display: none !important; }
/* Custom Dark Mode Background Color */
.darkmode { background-color: #100E11 !important; }
.darkmode2 { background-color: #020203 !important; }
.darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, p, span, a { color: #9CCFF3!important; }
h2, h2 a { color: #9CCFF3 !important; }
.white { color: #FFFFFF !important; }
/* Custom Dark Mode Text Link Color */
.link { color: #FFFFFF !important; }
.footer a.link { color: #FFFFFF !important; }
}
/* Copy dark mode styles for android support */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
max-height: inherit !important;
max-width: inherit !important;
line-height: auto !important;
margin-top: 0px !important;
visibility: inherit !important;
}
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img {
display: none;
display: none !important;
}
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #100E11 !important; }
[data-ogsc] .darkmode2 { background-color: #020203 !important; }
[data-ogsc] .darkmode3 { background-color: #222023 !important; }
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a { color: #9CCFF3!important; }
[data-ogsc] h2, [data-ogsc] h2 a { color: #9CCFF3!important; }
[data-ogsc] .white { color: #9CCFF3 !important; }
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color:#9CCFF3 !important; }
[data-ogsc] .footer a.link { color: #9CCFF3!important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<title></title>
</head>
<body id="body" class="darkmode body body-fix">
<div role="article" aria-roledescription="email" aria-label="Email from ForeverCar" xml:lang="en" lang="en">
<!--hidden preheader with preh-header spacer hack-->
<div style="display: none; max-height: 0px; overflow: hidden;"> Lock in your 2021 member rate before it's too late</div>
<!-- Insert ͏‌ hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;"> ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ </div>
<!--[if mso | IE]> <style type="text/css">
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style> <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="fff"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <table bgcolor="fff" role="presentation" border="0" cellpadding="0" cellspacing="0" width="680" align="center" style="width:680px;"> <tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"> <![endif]-->
<!--start of email-->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;background-color: #ffffff;">
<!--main content area-->
<tr>
<td class="tPad-0" align="center" valign="top" style="padding-top: 20px;"><table class="w100p" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;background-color: #ffffff;">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="45%" align="left" valign="bottom" bgcolor="#ffffff" style="padding:10px 10px 10px 10px;"><img src="images/Forevercar-horizontal-logo.jpg" width="250" height="52" style="display: block;font-family: sans-serif; font-size: 16px; color: #40505d;" alt="ForeverCar logo"/></td>
<td width="42%" align="right" valign="bottom" bgcolor="#ffffff" style="font-size:10px;color:#000000;font-family: 'Nunito Sans', sans-serif; sans-serif;padding:0px 0px 20px 0px;"><strong>FOR MEMBERS OF</strong></td>
<td width="13%" align="right" valign="bottom" bgcolor="#ffffff" style="padding:0px 10px 10px 10px;"><img src="images/FortBragg-logo.png" width="60" height="51" style="display: block;font-family: sans-serif; font-size: 16px; color: #000000;" alt=""/></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/top-divider.jpg" width="600" height="23" class="imgFull" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode" align="center" valign="top" style="background-color:#f0efed;padding:20px;"><!--Intro copy-->
<h1 style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0 20px; font-size: 23px; line-height: 32px; font-weight: normal; color: #40505d;tetext-align:center;">Finalize your vehicle protection before January 1 to <strong>lock in your best rate.</strong></h1></td>
</tr>
<tr>
<td style="background-color:#f0efed;padding-bottom:20px;"><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" class="contenttable">
<tr>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Confirm Your Quote</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Phone Number</a>
</td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td align="center" style="padding:10px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://X" style="height:40px;v-text-anchor:middle;width:170px;" arcsize="63%" strokecolor="#9CCFFF3" fillcolor="#9CCFFF3">
<w:anchorlock/>
<center style="color:#004876;font-family:sans-serif;font-size:13px;font-weight:bold;">Confirm Your Quote</center>
</v:roundrect>
<![endif]--><a href="http://X"
style="background-color:#9CCFF3;border:1px solid #9CCFF3;border-radius:25px;color:#004876;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;">Chat With Us</a>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-BANNER.png" width="2500" height="1348" class="imgFull" alt="A better car repair experience, so you can get back to your life." style="width: 100%; max-width: 600px; height: auto;display:block;color: #40505d; font-family:'Nunito Sans', Arial, sans-serif; text-align:center; font-weight:bold; font-size:24px; line-height:28x; text-decoration: none;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" class="darkmode" style="padding: 30px;background-color:#f0efed;"><!--Paragraph-->
<p style="font-family:'Nunito Sans', Arial, sans-serif; margin: 0;font-size: 18px; line-height: 23px; text-align: center; color: #40505d; font-weight: normal; text-align: left;"> <strong><Contact First Name> </strong><br>
<br>
Thank you for your interest in <strong>Mechanical Repair Coverage </strong>for your vehicle.
The new year is fast approaching, and there couldn’t be a better time to <strong>finalize your quote</strong>. Remember, as a CU member, you’re eligible for up to 25%* off mechanical repair coverage from ForeverCar. <br>
<br>
Take action now and you won’t have to pay for unexpected covered repairs in the year ahead. You can use a qualified mechanic you know and trust … and pay just the <strong>customized deductible</strong> you choose based on the plan you select. <br>
<br>
Since the cost of coverage is based on your vehicle’s age and mileage, it makes sense to <strong>revisit your quote</strong> now and lock in your best price. The longer you wait, the more coverage may cost. </p></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;text-align:center;padding:0px;"><a href="https://www.example.com/{{utm_code}}"><img src="images/QNS_Winter2021-25OFF.png" width="455" height="177" class="imgFull" alt="SAVE UP TO 25% OFF* Mechanical Repair" style="display:block;text-align: center; max-width:600px;color:#40505d;font-family:'Nunito Sans', Arial, sans-serif; text-align:center;font-size:16px;" /></a></td>
</tr>
<tr>
<td align="center" valign="top" style="background-color:#f0efed;"><!--Full width image (no LR padding)--><img src="images/bottom-divider.jpg" class="imgFull" width="600" height="60" alt="Divider line" style="width: 100%; max-width: 600px; height: auto;" /></td>
</tr>
<tr>
<td class="darkmode footer" align="left" valign="top" style="padding:10px 30px; background: #ffffff;color:#9f9f9f;font-family: 'Nunito Sans', sans-serif;font-size: 9px; line-height: 11px; margin: 0;"><!--Footer-->
* Member savings is based on a 2019 study of the average savings of the exclusive member price compared to the cost of equivalent plans in the ForeverCar Marketplace or through the ForeverCar call center.<br>
<br>
Mechanical Repair Coverage is provided and administered by Consumer Program Administrators, Inc. in all states except CA, where coverage is Mechanical Breakdown Insurance, offered as insurance by Virginia Surety Company, Inc., in NH, where coverage is provided and administered by Consumer Program Administrators, Inc. dba Consumer Warranty Program Administrators, in TX, where coverage is provided and administered by Consumer Program Administrators, Inc. dba The Administrators of Consumer Programs (TX License #175), in FL and OK, where coverage is provided and administered by Automotive Warranty Services of Florida, Inc. (FL License #60023 and OK License #44198051), and in WA, where coverage is provided by National Product Care Company and administered by Consumer Program Administrators, Inc., all located at 175 West Jackson Blvd., Chicago, IL 60604, 1-800-752-6265. Coverage varies by state. Replacement parts may be new, used, non-OEM or remanufactured. Be sure to read the Vehicle Service Contract or the Insurance Policy, which will explain the exact terms, conditions, and exclusions of this voluntary product.<br>
<br>
This email message contains information regarding products and services made available to you by ForeverCar LLC (CA License # 0L78726), an affiliate of CUNA Mutual Insurance Agency, Inc., for credit union members. If you do not wish to receive email messages from ForeverCar that are advertising or promotional in nature, please unsubscribe.<br>
<br>
ForeverCar 954 W Washington Blvd #340, Chicago, IL 60607 </td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>If something like this happens, is usually the ghost tables. Only way to find/fix is to go in manually and check for open and closing tags.