I have built a master template that is designed to accommodate all of our automation and campaign needs. I am having an issue where the text attribute for approximately 40% of the CTAs are not appearing when I send a test to my @outlook.com email address (as in it's literally just a blank CTA). This only seems to be a problem with outlook.com. The Outlook app, mobile, etc, all appear as intended.
Has anyone experienced anything similar or know of a solution to fix this? For simplicity, I have removed all the modules in the template except two - the first shows the CTA text as intended and the second doesn't when a test is sent. I have left the meta data in for the other modules in so those can be ignored.
I would attach an image showing the exact issue but there doesn't appear to be the option to do that.
Any feedback/help would be appreciated. It's hard to pinpoint what the issue is when it works fine in other email clients and mobile. Thanks in advance.
<!doctype html>
<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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<title></title>
<!--Global Variables-->
<meta class="mktoColor" id="email-bg-color" mktoname="Email BG Color" default="#E4E4E4">
<!--Modules Variables-->
<meta class="mktoNumber" id="pad-t-0" mktoname="Module Top Space" default="0" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-t-8" mktoname="Module Top Space" default="8" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-t-10" mktoname="Module Top Space" default="10" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-t-20" mktoname="Module Top Space" default="20" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-t-30" mktoname="Module Top Space" default="30" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-b-0" mktoname="Module Bottom Space" default="0" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-b-8" mktoname="Module Bottom Space" default="8" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-b-10" mktoname="Module Bottom Space" default="10" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-b-20" mktoname="Module Bottom Space" default="20" mktomodulescope="true" units="" step="1">
<meta class="mktoNumber" id="pad-b-30" mktoname="Module Bottom Space" default="30" mktomodulescope="true" units="" step="1">
<meta class="mktoList" id="pad-l-40" mktoname="Module Left Space" values="40,92,144,196" default="40" mktomodulescope="true">
<meta class="mktoList" id="pad-r-40" mktoname="Module Right Space" values="40,92,144,196" default="40" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color" mktoname="Module BG Color" default="#ffffff" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color-bl" mktoname="Module BG Color" default="#d7edfb" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color-gr" mktoname="Module BG Color" default="#d7f7e3" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color-gy" mktoname="Module BG Color" default="#e3e3e3" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color-pu" mktoname="Module BG Color" default="#ecd3f8" mktomodulescope="true">
<meta class="mktoColor" id="module-bg-color-ye" mktoname="Module BG Color" default="#f2d400" mktomodulescope="true">
<!--Logo Variables-->
<meta class="mktoList" id="logo-alignmentL" mktoname="Logo Alignment" values="left,center,right" default="left" mktomodulescope="true">
<!-- Background Image Link -->
<meta class="mktoImg" id="banner-block-bg" mktoname="Background Image" default="https://uk-pages.allstarcard.co.uk/rs/895-LCY-925/images/Banner-600x338.png?version=0" mktomodulescope="true">
<meta class="mktoString" id="bg-image-height" mktoname="Background Image Height" default="320" mktomodulescope="true">
<meta class="mktoString" id="bg-image-height-2" mktoname="Background Image Height" default="580" mktomodulescope="true">
<!--Video Variables-->
<meta class="mktoImg" id="video-block-bg" mktoname="Video Background Image" default="https://uk-pages.allstarcard.co.uk/rs/895-LCY-925/images/Banner-600x338.png?version=0" mktomodulescope="true">
<meta class="mktoString" id="video-image-height" mktoname="Video Image Height" default="359" mktomodulescope="true">
<meta class="mktoString" id="video-link-x" mktoname="Video Link" default="#" mktomodulescope="true">
<meta class="mktoString" id="bg-img-link" mktoname="Background Image Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<!--Text Box Variables-->
<meta class="mktoColor" id="box-bg-color-bl" mktoname="Text Box BG Color" default="#f2d400" mktomodulescope="true">
<!--Headline Variables-->
<meta class="mktoColor" id="headline-color" mktoname="Headline Color" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="headline-color-wh" mktoname="Headline Color" default="#FFFFFF" mktomodulescope="true">
<meta class="mktoColor" id="headings-color" mktoname="Headings Color" default="#000000" mktomodulescope="true">
<meta class="mktoNumber" id="text-size-1" mktoname="Headline Text Size" default="36" mktomodulescope="true" min="1" max="60" units="" step="1">
<meta class="mktoBoolean" id="show-title" mktoname="Show Headline?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-heading" mktoname="Show Heading?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--Text Variables-->
<meta class="mktoColor" id="text-color" mktoname="Text Color" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="text-color-bl" mktoname="Text Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="text-color-wh" mktoname="Text Color" default="#ffffff" mktomodulescope="true">
<meta class="mktoColor" id="text-color-table-header" mktoname="Table Header Text Color" default="#ffffff" mktomodulescope="true">
<meta class="mktoColor" id="row1-text-color" mktoname="Row 1 Text Color" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="row2-text-color" mktoname="Row 2 Text Color" default="#000000" mktomodulescope="true">
<meta class="mktoColor" id="row3-text-color" mktoname="Row 3 Text Color" default="#000000" mktomodulescope="true">
<meta class="mktoList" id="text-alignmentL" mktoname="Text Alignment" values="left,center,right" default="left" mktomodulescope="true">
<meta class="mktoList" id="text-alignmentC" mktoname="Text Alignment" values="left,center,right" default="center" mktomodulescope="true">
<meta class="mktoList" id="hero-vertical-align" mktoname="Text - Vertical Alignment" values="top,middle,bottom" default="middle" mktomodulescope="true">
<meta class="mktoList" id="hero-horizontal-align" mktoname="Text - Horizontal Alignment" values="left,center,right" default="left" mktomodulescope="true">
<meta class="mktoList" id="bullets-vertical-align" mktoname="Text - Vertical Alignment" values="top,middle" default="top" mktomodulescope="true">
<meta class="mktoBoolean" id="show-text" mktoname="Show Text?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-right-links" mktoname="Show Right CTA?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoNumber" id="banner-text-width" mktoname="Text Width" default="576" max="576" min="1" mktomodulescope="true" units="" step="1">
<!--Image / Icons Variables-->
<meta class="mktoBoolean" id="show-signature" mktoname="Show Email Sign Off?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-headshot" mktoname="Show Headshot?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-image" mktoname="Show Image?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-timer" mktoname="Show Countdown Timer?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-social-icon-1" mktoname="Show Social Icon 1?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-social-icon-2" mktoname="Show Social Icon 2?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-social-icon-3" mktoname="Show Social Icon 3?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-social-icon-4" mktoname="Show Social Icon 4?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-social-icon-5" mktoname="Show Social Icon 5?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--CTA Variables-->
<meta class="mktoColor" id="cta-bg-color" mktoname="CTA Background Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="cta-bg-color-ry" mktoname="CTA Background Color" default="#1952C4" mktomodulescope="true">
<meta class="mktoColor" id="cta-bg-color-1" mktoname="CTA 1 Background Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="cta-bg-color-2" mktoname="CTA 2 Background Color" default="#59eb9c" mktomodulescope="true">
<meta class="mktoColor" id="cta-border-color" mktoname="CTA Border Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="cta-border-color-wh" mktoname="CTA Border Color" default="#FFFFFF" mktomodulescope="true">
<meta class="mktoList" id="cta-alignmentL" mktoname="CTA Alignment" values="left,center,right" default="left" mktomodulescope="true">
<meta class="mktoList" id="cta-alignmentC" mktoname="CTA Alignment" values="left,center,right" default="center" mktomodulescope="true">
<meta class="mktoList" id="cta-alignmentR" mktoname="CTA Alignment" values="left,center,right" default="right" mktomodulescope="true">
<meta class="mktoBoolean" id="show-cta" mktoname="Show CTA?" default="true" true_value="outline:none;" false_value="display:none!important; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-cta-1" mktoname="Show CTA 1?" default="true" true_value="outline:none;" false_value="display:none!important; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-cta-2" mktoname="Show CTA 2?" default="true" true_value="outline:none;" false_value="display:none!important; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-cta-text" mktoname="Show CTA Text?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta mktomodulescope="true" class="mktoString" id="CTAText" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText2" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText3" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText4" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText5" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText6" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText7" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText8" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText9" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText10" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText11" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText12" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText13" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText14" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText15" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAText16" mktoname="CTA Text" default="Learn More">
<meta mktomodulescope="true" class="mktoString" id="CTAURL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA2URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA3URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA4URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA5URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA6URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA7URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA8URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA9URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA10URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA11URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA12URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA13URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA14URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA15URL" mktoname="CTA URL" default="#">
<meta mktomodulescope="true" class="mktoString" id="CTA16URL" mktoname="CTA URL" default="#">
<!--Table Variables-->
<meta class="mktoString" id="column-1-width" mktoname="Column 1 Width" default="26%" mktomodulescope="true">
<meta class="mktoString" id="column-2-width" mktoname="Column 2 Width" default="37%" mktomodulescope="true">
<meta class="mktoString" id="column-3-width" mktoname="Column 3 Width" default="37%" mktomodulescope="true">
<meta class="mktoString" id="column-1-width-2" mktoname="Column 1 Width" default="25%" mktomodulescope="true">
<meta class="mktoString" id="column-2-width-2" mktoname="Column 2 Width" default="25%" mktomodulescope="true">
<meta class="mktoString" id="column-3-width-2" mktoname="Column 3 Width" default="25%" mktomodulescope="true">
<meta class="mktoString" id="column-4-width-2" mktoname="Column 4 Width" default="25%" mktomodulescope="true">
<meta class="mktoColor" id="table-header-bg-color" mktoname="Table Heading BG Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="agenda-body-text-color" mktoname="Body Text Color" default="#000000" mktomodulescope="true">
<meta class="mktoList" id="table-textAlignL" mktoname="Table Text Alignment" values="left,center,right" default="left" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy" mktoname="Show Agenda Headline?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-1" mktoname="Show Row 1?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-2" mktoname="Show Row 2?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-3" mktoname="Show Row 3?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-4" mktoname="Show Row 4?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-5" mktoname="Show Row 5?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-6" mktoname="Show Row 6?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-7" mktoname="Show Row 7?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-8" mktoname="Show Row 8?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-sub-copy-9" mktoname="Show Row 9?" default="true" true_value="outline:none;" false_value="display:none; margin:0; font-size:0; mso-hide:all;max-height:0px;overflow:hidden;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-text-1" mktoname="Show Text Before Table?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-text-2" mktoname="Show Text After Tables?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--Bullets BG Colors-->
<meta class="mktoColor" id="row1-bg-color" mktoname="Row 1 BG Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="row2-bg-color" mktoname="Row 2 BG Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="row3-bg-color" mktoname="Row 3 BG Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoBoolean" id="show-row1" mktoname="Show Row 1" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;height:0; padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-row2" mktoname="Show Row 2" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;height:0; padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-row3" mktoname="Show Row 3" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;height:0; padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--Divider / Spacer Variables-->
<meta class="mktoNumber" id="10px-spacer" mktoname="Divider Height" default="10" min="1" max="300" step="1" mktomodulescope="true">
<meta class="mktoNumber" id="2px-spacer" mktoname="Divider Height" default="2" min="1" max="300" step="1" mktomodulescope="true">
<meta class="mktoNumber" id="1px-spacer" mktoname="Divider Height" default="1" min="1" max="300" step="1" mktomodulescope="true">
<meta class="mktoColor" id="divider-bg-color" mktoname="Spacer BG Color" default="#65c6f7" mktomodulescope="true">
<meta class="mktoColor" id="separator-bg-color" mktoname="Divider Color" default="#65c6f7" mktomodulescope="true">
<meta class="mktoColor" id="separator2-bg-color" mktoname="Separator Color" default="#000000" mktomodulescope="true">
<meta class="mktoBoolean" id="show-separator" mktoname="Show Separator Line?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; mso-hide:all; margin:0; font-size:0; max-height:0;height:0; padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--Border Variables-->
<meta class="mktoColor" id="border-color" mktoname="Border Color" default="#f2d400" mktomodulescope="true">
<meta class="mktoColor" id="border-color-grey" mktoname="Border Color" default="#ffffff" mktomodulescope="true">
<!-- Journey Steps Variables -->
<meta class="mktoString" id="breadcrumb-link-1" mktoname="Step 1 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoString" id="breadcrumb-link-2" mktoname="Step 2 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoString" id="breadcrumb-link-3" mktoname="Step 3 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoString" id="breadcrumb-link-4" mktoname="Step 4 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoString" id="breadcrumb-link-5" mktoname="Step 5 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoString" id="breadcrumb-link-6" mktoname="Step 6 Link" default="https://allstarcard.co.uk/" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-1" mktoname="Show Step 1?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-2" mktoname="Show Step 2?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-3" mktoname="Show Step 3?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-4" mktoname="Show Step 4?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-5" mktoname="Show Step 5?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="show-step-6" mktoname="Show Step 6?" default="true" true_value="outline:none;" false_value="display:none; overflow:hidden; margin:0; font-size:0; max-height:0;mso-hide:all;width:0;padding:0;" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-1-state" mktoname="Step 1 Checked?" default="true" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-2-state" mktoname="Step 2 Checked?" default="false" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-3-state" mktoname="Step 3 Checked?" default="false" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-4-state" mktoname="Step 4 Checked?" default="false" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-5-state" mktoname="Step 5 Checked?" default="false" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<meta class="mktoBoolean" id="breadcrumb-6-state" mktoname="Step 6 Checked?" default="false" true_value="checked" false_value="unchecked" true_value_name="YES" false_value_name="NO" mktomodulescope="true">
<!--[if gte mso 9]>
<style type="text/css">
table, td,th, div, a, span, th, p, li {font-family: Arial, Helvetica, sans-serif !important;}
table, td,th { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; }
img { -ms-interpolation-mode:bicubic;}
p,a,li,td,th,blockquote {mso-line-height-rule:exactly;}
a {text-decoration: none;color: inherit!important;}
table, tr, td {border-collapse: collapse;} tr { line-height:0px; border-collapse: collapse; }
</style>
<![endif]-->
<link rel="stylesheet" href="https://use.typekit.net/nbu5kye.css">
<style type="text/css">
img { -ms-interpolation-mode:bicubic;}
html, body {
margin: 0 auto!important;
padding: 0!important;
height: 100%!important;
width: 100%!important;
}
#MessageViewBody, #MessageWebViewDiv {
width: 100%!important;
}
#body_style {
width: 100%!important;
min-width: 100%!important;
}
table td {
border-collapse: collapse!important;
border-spacing: 0!important;
box-sizing: border-box;
margin: 0 auto!important;
}
table td {
border-collapse: collapse;
}
a [x-apple-data-detectors], *[x-apple-data-detectors], .x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0!important;
cursor: default!important;
color: #f2d400!important;
text-decoration: none!important;
font-size: inherit;
font-family: Arial, Helvetica,sans-serif;
font-weight: inherit;
line-height: inherit;
}
html {
margin: 0 auto!important;
padding: 0!important;
height: 100%!important;
width: 100%!important;
}
body {
margin: 0!important;
padding: 0!important;
height: 100%!important;
width: 100%!important;
}
.footer a {
color: #FFFFFF!important;
font-family: Arial, Helvetica,sans-serif;
}
img {
border: 0!important;
outline: none!important;
display: inline-block!important;
}
a, a:visited, a:focus {
text-decoration: none;
color: inherit;
font-family: Arial, Helvetica,sans-serif;
}
u + #body a {
color: inherit;
text-decoration: inherit;
font-size: inherit;
font-family: Arial, Helvetica,sans-serif;
font-weight: inherit;
line-height: inherit;
}
div, p, p span {
margin: 0;
padding: 0;
margin-bottom: 0;
}
ul {
margin-bottom: 0;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
#MainContainer a, #MainContainer a:link, #MainContainer a:visited, #MainContainer a:active {
text-decoration: none;
font-weight: bold;
color: inherit;
}
table.munged, table.munged .button {
width: auto!important;
table-layout: auto!important;
min-width: 100%!important;
}
td.munged {
width: auto!important;
white-space: normal!important;
min-width: 100%!important;
}
td {
padding: 0;
margin: 0;
}
img {
border: none;
}
a img {
border-style: none;
}
ul, ol {
color: inherit;
font-family: Arial, Helvetica,sans-serif!important;
}
li {
color: inherit;
font-size: inherit;
line-height: inherit;
font-weight: normal;
font-family: Arial, Helvetica,sans-serif!important;
font-weight: normal;
padding-bottom: 4px!important;
}
ul li::marker {
font-size: 120%;
color: inherit;
}
@media screen and (max-width: 600px) {
.email-container {
max-width: 100%!important;
width: 100%!important;
}
.column-left-50 {
display: inline-block!important;
width: 50%!important;
max-width: 50%!important;
direction: ltr!important;
}
.column-right-50 {
display: inline-block!important;
width: 50%!important;
max-width: 50%!important;
direction: ltr!important;
}
.column-left {
display: inline-block!important;
width: 30%!important;
max-width: 30%!important;
direction: ltr!important;
}
.column-right {
display: inline-block!important;
width: 70%!important;
max-width: 70%!important;
direction: ltr!important;
}
.fluid {
max-width: 100%!important;
height: auto!important;
margin-left: auto!important;
margin-right: auto!important;
min-width: 100%!important;
width: 100%!important;
}
.fluid-logo {
width: 140px!important;
max-width: 140px!important;
}
.font-mob-sm {
font-size: 8px!important;
line-height: normal!important;
}
.font-mob-md {
font-size: 13px!important;
line-height: normal!important;
}
.stack-column, .stack-column-center, .stack-column-left {
display: block!important;
width: 100%!important;
max-width: 100%!important;
direction: ltr!important;
min-width: 100%!important;
}
.stack-column-100 {
display: block!important;
width: 100%!important;
max-width: 100%!important;
min-width: 100%!important;
}
.stack-column-center {
text-align: center!important;
}
.stack-column-left {
text-align: left!important;
}
.stack-left {
text-align: left!important;
}
.center-on-narrow {
text-align: center!important;
display: block!important;
margin-left: auto!important;
margin-right: auto!important;
}
.right-on-narrow {
text-align: right!important;
display: block!important;
margin-left: auto!important;
margin-right: auto!important;
}
.left-on-narrow {
text-align: left!important;
display: block!important;
margin-left: auto!important;
margin-right: auto!important;
}
.text-center {
text-align: center!important;
}
.header-cta {
padding: 10px 10px!important;
font-size: 12px!important;
line-height: normal!important;
}
.text-left {
text-align: left!important;
}
.w100 {
width: 100%!important;
max-width: 100%!important;
display: block;
}
.w20 {
width: 20px!important;
max-width: 20px!important;
}
.w67 {
width: 67px!important;
max-width: 67px!important;
}
.w70 {
width: 70px!important;
max-width: 70px!important;
}
.w16 {
width: 16px!important;
max-width: 16px!important;
}
.w0 {
width: 0!important;
max-width: 0!important;
}
.height-auto {
height: auto!important;
}
.h30 {
height: 30px!important;
max-height: 30px!important;
}
.reset-pad-lr {
padding-left: 0!important;
padding-right: 0!important;
}
.reset-pad-l {
padding-left: 0!important;
}
.pad-l-30 {
padding-left: 30px!important;
}
.pad-l-20 {
padding-left: 20px!important;
}
.pad-0 {
padding: 0!important;
margin: 0!important;
}
.pad-t-0 {
padding-top: 0!important;
}
.pad-t-15 {
padding-top: 15px!important;
}
.pad-t-10 {
padding-top: 10px!important;
}
.pad-t-16 {
padding-top: 16px!important;
}
.pad-t-20 {
padding-top: 20px!important;
}
.pad-b-0 {
padding-bottom: 0!important;
}
.pad-b-16 {
padding-bottom: 16px!important;
}
.pad-b-20 {
padding-bottom: 20px!important;
}
.mar-10 {
margin: 10px!important;
}
.pad-r-10 {
padding-right: 10px!important;
}
.pad-r-0 {
padding-right: 0!important;
}
.pad-r-30 {
padding-right: 30px!important;
}
.pad-l-10 {
padding-left: 10px!important;
}
.pad-l-0 {
padding-left: 0!important;
}
.pad-lr-20 {
padding-right: 20px!important;
padding-left: 20px!important;
}
.step {
width: 100%!important;
max-width: 100%!important;
}
.max-100 {
max-width: 100%!important;
}
.column-1 {
width: 50%!important;
}
.column-2 {
width: 50%!important;
}
.column-3 {
width: 38%!important;
}
.mob_16 {
font-size:16px!important;
}
.mobile-hide {
display:none!important;
}
}
@media screen and (max-width: 325px) {
.font-mob-sm {
font-size: 6px!important;
line-height: normal!important;
}
.font-mob-md {
font-size: 10px!important;
line-height: normal!important;
}
}
</style>
</head>
<body width="100%" bgcolor="${email-bg-color}" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly!important;background-color:${email-bg-color};min-width:100%;" marginwidth="0" marginheight="0" offset="0" topmargin="0" leftmargin="0" id="body" class="dark-mode-email-bg">
<center style="width: 100%; background: ${email-bg-color}; text-align: center;" class="dark-mode-email-bg">
<div style="max-width: 600px;margin:0 auto;width:100%;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" align="center" style="width:600px;">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="margin:0 auto; width:600px; max-width: 600px;" class="email-container">
<tbody>
<tr>
<td align="center" style="margin:0 auto;">
<table border="0" cellpadding="0" align="center" cellspacing="0" width="100%" class="mktoContainer" id="container">
<tr class="mktoModule" id="m3" mktoname="Header Module" bgcolor="${module-bg-color}">
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="${module-bg-color}" align="center" style="margin:0 auto; width:600px; max-width: 600px;" class="email-container dark-mode-module">
<tbody>
<tr>
<td style="padding: ${pad-t-30}px 0 ${pad-b-30}px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
<td align="left">
<div class="mktoSnippet" id="snippet-logo" mktoname="Logo Snippet">
<p align="left"><a href="https://www.allstarcard.co.uk/" target="_blank" style="text-decoration: none;"> <img src="https://uk-pages.allstarcard.co.uk/rs/895-LCY-925/images/allstar-logo-black.png?version=0" alt="allstar-logo-black.png" width="81" constrain="true" imagepreview="false" style="display: block; width: 81px; max-width: 81px;"></a></p>
</div> </td>
<td align="right" style="font-size:14px; color:#000000;font-family: Arial, Helvetica,sans-serif;font-weight:bold;${show-cta}">
<div class="mktoText" id="header-cta" mktoname="View in browser">
<a href="{{system.viewAsWebpageLink}}" style="color:#000000; text-align: center; text-decoration: underline; ${show-cta}" class="text-dark"> View in browser </a>
</div> </td>
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="m12" mktoname="Headline, Copy & full width button" bgcolor="${module-bg-color}">
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="${module-bg-color}" align="center" style="margin:0 auto; width:600px; max-width: 600px;" class="email-container dark-mode-module">
<tbody>
<tr>
<td style="padding: ${pad-t-30}px 0 ${pad-b-30}px 0;font-size:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
<td valign="middle">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%">
<tbody>
<tr style="${show-title}">
<td align="${text-alignmentL}" style="padding-bottom:20px;${show-title}">
<table border="0" cellpadding="0" cellspacing="0" align="${text-alignmentL}" width="100%">
<tbody>
<tr style="${show-title}">
<td align="${text-alignmentL}" style="color:${headline-color}; font-family: Arial, Helvetica,sans-serif;font-size:${text-size-1}px; line-height:120%; font-weight:bold;${show-title} " class="text-white"> <span class="mktoText" id="m12-headline" mktoname="Headline">Large Headline</span> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td align="${text-alignmentL}" style="font-family: Arial, Helvetica,sans-serif;font-size:14px; line-height:120%;font-weight:normal;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" align="${text-alignmentL}" width="100%">
<tbody>
<tr>
<td align="${text-alignmentL}" style="color:${text-color};font-family: Arial, Helvetica,sans-serif;font-size:14px;font-weight:normal; line-height:120%;" class="text-white"> <span class="mktoText" id="m12-text" mktoname="Text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="${show-cta}">
<td style="${show-cta}">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr style="${show-cta}">
<td style="padding-top:10px;${show-cta}">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: separate; ${show-cta}">
<tbody>
<tr style="${show-cta}">
<td bgcolor="${cta-bg-color}" align="center" style="font-size:14px; color:#000000;font-family: Arial, Helvetica,sans-serif;font-weight:bold;padding:12px 14px;border-radius:50px; ${show-cta}" class="mob_16 dark-mode-cta">
<div class="mktoText" id="m12-cta" mktoname="CTA">
<a href="${CTAURL}" style="color:#000000; text-align: center; text-decoration: none; ${show-cta}" class="text-dark mob_16"> ${CTAText} </a>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="m-50-50-module" mktoname="50/50 Image right, Subheading, Copy and full width Button" bgcolor="${module-bg-color}">
<td style="padding:0px;font-size:0px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="width:600px;">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="${module-bg-color}" align="center" style="margin:0 auto; width:100%; max-width: 600px;" class="dark-mode-module">
<tbody>
<tr>
<td style="padding: ${pad-t-30}px 0 ${pad-b-30}px 0;font-size:0px;">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="email-container">
<tbody>
<tr>
<td valign="top" align="center" style="padding-bottom:20px;" class="center-on-narrow stack-column-right" dir="rtl">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="email-container stack-column-right" dir="rtl">
<tbody>
<tr>
<td valign="top" align="center" width="300" style="width: 300px;" class="stack-column-center" dir="ltr">
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="ltr">
<tbody>
<tr>
<td align="center" style="padding: 0px 40px 0px 10px;" class="pad-lr-20">
<div class="mktoImg" id="image-right-50-50" mktoname="Image | Max width 250px" mktolockimgsize="true">
<a href="https://allstarcard.co.uk/"><img src="https://uk-pages.allstarcard.co.uk/rs/895-LCY-925/images/Alternating-Image-Layout-270x200-07.jpg?version=0" width="250" alt="image" class="fluid" style="border-radius:15px;display:block; width:250px; max-width:250px; height:auto;"></a>
</div> </td>
</tr>
</tbody>
</table> </td>
<td valign="top" align="center" width="300" style="width: 300px;" class="stack-column-center" dir="ltr">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" dir="ltr">
<tbody>
<tr>
<td align="left" style="padding: 0px 10px 0px 40px;" dir="ltr" class="pad-b-0 pad-t-20 pad-lr-20">
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="ltr">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" dir="ltr">
<tbody>
<tr style="${show-title}">
<td align="${text-alignmentL}" style="color:${headline-color}; font-family: Arial, Helvetica,sans-serif;font-size:22px; line-height:120%;font-weight:bold;${show-title}" class="text-white">
<div class="mktoText" id="m-50-50-headline" mktoname="Headline">
Intro headline
</div> </td>
</tr>
<tr>
<td align="${text-alignmentL}" style="color:#565051; padding: 20px 0px 0px 0px; font-family: Arial, Helvetica,sans-serif;font-size:14px; line-height:120%; font-weight:normal;" class="text-white">
<div class="mktoText" id="m-50-50-text" mktoname="Text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="${show-cta}">
<td style="${show-cta}">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="${show-cta}">
<tbody>
<tr style="${show-cta}">
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
<td style="${show-cta}">
<table align="center" border="0" cellpadding="0" width="100%" cellspacing="0" style="border-collapse: separate; ${show-cta}">
<tbody>
<tr style="${show-cta}">
<td bgcolor="${cta-bg-color}" align="center" style="color:#000000; font-family: Arial, Helvetica,sans-serif;font-weight:bold;padding:12px 14px;min-width:150px;border-radius:50px; ${show-cta}" class="dark-mode-cta">
<div class="mktoText" id="m-50-50-cta" mktoname="CTA">
<a href="${CTA3URL}" style="color:#000000; font-size:14px; text-align: center; text-decoration: none; ${show-cta}" class="text-dark mob_16"> ${CTAText3} </a>
</div> </td>
</tr>
</tbody>
</table> </td>
<td width="40" class="w20" style="font-size: 1px; line-height: 1px;width:40px;"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
Solved! Go to Solution.
It could have something to do with using "#" for a placeholder in your buttons. Outlook sometimes doesn't seem to recognize links unless they've got a proper URL format and will not display it as a link (button) unless that's setup right.
Another possibility that I've seen lately is that Outlook.com on Firefox and Edge stopped readying CSS in the <style> tag in the <head> of the document. I was able to resolve the issue by moving all the CSS from the <style> tag to inline styles on the actual <a> element in the <body>. I think Outlook pushed a new UI this quarter and surprise, surprise, Microsoft rolled out a new "something" that wasn't as well tested as it should have been. In my testing and from a few things that I've read, they've rolled back some of the changes to fix this issue in the last few weeks.
Hi @Jon_Hardwick , please share the screenshot of the issue that you are facing.
Right now, I have checked your HTML in litmus and did not find any major issue.
It could have something to do with using "#" for a placeholder in your buttons. Outlook sometimes doesn't seem to recognize links unless they've got a proper URL format and will not display it as a link (button) unless that's setup right.
Another possibility that I've seen lately is that Outlook.com on Firefox and Edge stopped readying CSS in the <style> tag in the <head> of the document. I was able to resolve the issue by moving all the CSS from the <style> tag to inline styles on the actual <a> element in the <body>. I think Outlook pushed a new UI this quarter and surprise, surprise, Microsoft rolled out a new "something" that wasn't as well tested as it should have been. In my testing and from a few things that I've read, they've rolled back some of the changes to fix this issue in the last few weeks.
I changed all the links from # to an actual URL and that seems to have resolved the issue.
Thanks for the suggestion. I would never have thought of that since the text still showed up in 50% of the CTAs in outlook.com.