Re: Outlook not rendering CTA buttons for Email template

Chris_Francis1 · ‎10-11-2023

Hi I have an issue with my HTML Email template code. It works perfect for other email clients expect for outlook. See attached for the error i am getting in outlook.

Here's my code:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

  

  

    <meta class="mktoString" id="animMasthead_rcolText" mktoName="Text" default="Optional text" mktoModuleScope="true">

    <meta class="mktoString" id="twoColMastheadLink" mktoName="Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="twoColMastheadDay" mktoName="Day" default="XX&#8211;XX" mktoModuleScope="true">

<meta class="mktoString" id="twoColMastheadMonth" mktoName="Month" default="Month&nbsp;&nbsp;|&nbsp;&nbsp;" mktoModuleScope="true">

<meta class="mktoString" id="twoColMastheadLoc" mktoName="Location" default="Location" mktoModuleScope="true">

<meta class="mktoString" id="twoColLOGOMastheadLink" mktoName="Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="buttonClass" mktoName="Button Class" default="#" mktoModuleScope="true">

<meta class="mktoString" id="IntlTwoColMastheadLink" mktoName="Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="bannerAdLink" mktoName="Banner Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="twoColImageRightLink" mktoName="Image Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="twoColImageLeftLink" mktoName="Image Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="oneColfeatureLink" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="twoColumnButtonLeftLink" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="twoColumnButtonRightLink" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="buttonWidthMS" mktoName="MS Button Width" default="200" mktoModuleScope="true">

<meta class="mktoString" id="buttonWidth" mktoName="Button Width" default="200" mktoModuleScope="true">

<meta class="mktoString" id="threeColumnButtonLeft" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="threeColumnButtonCenter" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="threeColumnButtonRight" mktoName="Button Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="headlineLink" mktoName="Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="featureheadlineLink" mktoName="Feature Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="fullwidthImageLink" mktoName="Full Width Image Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="NewsLeftText" mktoName="NewsText" default="Linked News Text>" mktoModuleScope="true">

<meta class="mktoString" id="NewsMiddleText" mktoName="NewsText" default="Linked News Text>" mktoModuleScope="true">

<meta class="mktoString" id="NewsRightText" mktoName="NewsText" default="Linked News Text>" mktoModuleScope="true">

<meta class="mktoString" id="newsText" mktoName="newsText" default="News Text " mktoModuleScope="true">

<meta class="mktoString" id="newsLinkLeft" mktoName="Left Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="newsLinkMiddle" mktoName="Middle Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="newsLinkRight" mktoName="Right Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="NewsletterFeatureHeadline" mktoName="Newsletter Feature Headline Text" default="Newsletter Feature Headline Text" mktoModuleScope="true">

<meta class="mktoString" id="NewsletterFeatureSubhead" mktoName="Feature Top Subhead" default="Newsletter Feature Top Subhead" mktoModuleScope="true">

<meta class="mktoString" id="NewsletterFeatureLinked" mktoName="Feature Headline Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="NewsletterHeadlineText" mktoName="Headline Text" default="Linked Newsletter Headline Text >" mktoModuleScope="true">

<meta class="mktoString" id="NewsletterSubgroupText" mktoName="Subgroup Text" default="Newsletter Sub Group Text" mktoModuleScope="true">

    <meta class="mktoString" id="twoColMastheadLocationText" mktoName="Location Text" default="Enter Text Here" mktoModuleScope="true">

  <meta class="mktoList" id="bodyBackgroundColor" mktoName="Main Background Color" values="#1e22aa, #EBEBEB, #FFFFFF" default="#1e22aa" mktoModuleScope="false">

<meta class="mktoList" id="quoteColor" mktoName="Quotation Color" values="admiral,apollo,aster,coral,mint" default="admiral" mktoModuleScope="true">

<meta class="mktoString" id="oneColFooterLink" mktoName="Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="IntlColFooterLink" mktoName="Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="buttonText" mktoName="Button Text" default="Button Text" mktoModuleScope="true">

<meta class="mktoString" id="headlineText" mktoName="Headline Text" default="Headline Text Here" mktoModuleScope="true">

<meta class="mktoString" id="eventName" mktoName="Event Name" default="This is Where the Event Name Will Appear" mktoModuleScope="true">

<meta class="mktoString" id="subehad" mktoName="Small Headline Text" default="Small Headline Text Here" mktoModuleScope="true">

<meta class="mktoString" id="coralheadlineText" mktoName="Coral Headline Text" default="Coral Headline Text Here" mktoModuleScope="true">

<meta class="mktoString" id="allheadlineLink" mktoName="Headline Link" default="#" mktoModuleScope="true">

    <meta class="mktoString" id="buttonText2" mktoName="Button Text2" default="Button Text2" mktoModuleScope="true">

<meta class="mktoList" id="headlineColor" mktoName="Headline Text Color" values="#1e22aa, #FFFFFF" default="#FFFFFF" mktoModuleScope="true">

<meta class="mktoList" id="textColor" mktoName="Body Text Color" values="#666666, #FFFFFF" default="#FFFFFF" mktoModuleScope="true">

<meta class="mktoList" id="buttonColor" mktoName="Button Color" values="#1e22aa, #FFFFFF" default="#FFFFFF" mktoModuleScope="true">

<meta class="mktoList" id="buttonTextColor" mktoName="Button Text Color" values="#1e22aa, #FFFFFF" default="#1e22aa" mktoModuleScope="true">

<meta class="mktoString" id="H23_logoLink" mktoName="H23 Logo Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="H23_themeLink" mktoName="H23 Theme Link" default="#" mktoModuleScope="true">

<meta class="mktoString" id="floatTableWidth" mktoName="Add 20! Float Table Width" default="220" mktoModuleScope="true">

  

  

<!--[if gte mso 12]><br /> <![endif]-->

<!--[if (gte mso 9)|(IE)]>

<style type="text/css">

table {

border-collapse: collapse;

border-spacing: 0; }

</style>

<![endif]-->

<!--[if mso]>

        <style>

            * {

                font-family: 'Century Gothic', 'Avenir', sans-serif !important;

            }

        </style>

    <![endif]-->

<!--[if gt mso 15]>

     <style type="text/css" media="all">

     /* Outlook 2016 Height Fix */

     table, tr, td {border-collapse: collapse;}

     tr { font-size:0px; line-height:0px; border-collapse: collapse; }

     <![endif]-->

<!--[if !mso]><!-->

<link rel="stylesheet" href="https://use.typekit.net/tbr5few.css" />

<!--<![endif]-->

<!-- Web Font / @font-face : END -->

<style>

html,

body {

margin: 0 auto !important;

padding: 0 !important;

height: 100% !important;

width: 100% !important;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}



* {

-ms-text-size-adjust: 100%;

}



td {

mso-table-lspace: Opt !important;

mso-table-rspace: Opt !important;

}



a {

color: #666666;

text-decoration: none;

}



.burst img {

width: 100%

}



.bgheadline a {

color: #FFFFFF !important;

text-decoration: none !important;

}



.coralHeadline a {

color: #FF5a5a;

text-decoration: none !important;

}



.cm-image-bottom {

display: none !important;

}



.eventDate {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

}



.feature-td {

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

}



.feature-td2 {

padding: 0px !important;

}



.feature-row a {

color: #1e22aa !important;

}



.headline2 a {

color: #1e22aa !important;

text-decoration: none !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.two-column-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

}



.paragraph-only-row {

padding: 0px 40px 0px 40px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

}



.paragraph-only-row a {

color: #666666 !important;

}



.paragraph-only-row-admiral {

padding: 0px 40px 0px 40px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

}



.paragraph-only-row-admiral a {

color: #1e22aa !important;

}



* {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}



div[style*="margin: 16px 0"] {

margin: 0 !important;

}



table,

td {

mso-table-lspace: 0pt !important;

mso-table-rspace: 0pt !important;

}



ul li {

margin-bottom: .25em !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

color: #666666 !important;

}



ol li {

margin-bottom: .25em !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

color: #666666 !important;

}



ol {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

color: #666666 !important;

}



ul {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 21px !important;

color: #666666 !important;

}



.showbar {

display: none !important;

}



.social_links a {

text-decoration: none;

}



.subhead a {

color: #54c0e8 !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.subhead-only-row a {

color: #54c0e8 !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.subhead2 a {

color: #54c0e8 !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.three-column-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

line-height: 17px !important;

}



.three-column-text a {

color: #666666 !important;

}



.three-column-logo-text {

padding: 0px 0px 20px 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

line-height: 17px !important;

}



.three-column-news-text a {

font-size: 13px !important;

color: #1e22aa !important;

font-weight: bold !important;

}



.two-column-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 12px !important;

line-height: 17px !important;

}



.twocol-plain-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 14px !important;

line-height: 22px !important;

}



table {

border-spacing: 0 !important;

border-collapse: collapse !important;

table-layout: fixed !important;

margin: 0 auto !important;

}



table table table {

table-layout: auto;

}



img {

-ms-interpolation-mode: bicubic;

}



.mobile-link--footer a,

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: underline !important;

}



.wrapper {

background-color: #1e22aa;

}

</style>

<style>

@media screen and (max-width: 650px) {

.ad-row {

padding: 0px 20px 0px 20px !important;

}



.awards-masthead {

text-align: center !important;

align: center !important;

}



.bg-headline-only-row {

padding: 20px !important;

}



.burst img {

width: 90% !important;

}



.coral-headline-only-row {

padding: 0px 20px 0px 20px !important;

}



.email-container {

width: 100% !important;

margin: auto !important;

}



.fluid,

.fluid-centered {

max-width: 100% !important;

height: auto !important;

margin-left: auto !important;

margin-right: auto !important;

}



.fluid-centered {

margin-left: auto !important;

margin-right: auto !important;

}



.float-img {

float: right !important;

}



.gray-spacer-td-lg {

padding: 20px !important;

}



.gray-spacer-td-sm {

padding: 10px 20px 10px 20px !important;

}



.headline-only-row a {

color: #1e22aa !important;

}



.stack-column,

.stack-column-center {

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}



.stack-column-center {

text-align: left !important;

}



table.center-on-narrow {

display: inline-block !important;

}



.barbreak {

display: none !important;

}



.body-copy {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

margin-bottom: 20px !important;

}



.body-copy2 {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

}



.body-subhead {

margin-bottom: 10px !important;

font-size: 15px !important;

line-height: 21px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.bottom-button {

padding: 20px 20px 20px 20px !important;

}



.button-left-row {

padding: 0px 20px 0px 20px !important;

}



.button-middle-row {

padding: 0px 20px 0px 20px !important;

}



.button-right-row {

padding: 0px 20px 0px 20px !important;

}



.center-on-narrow {

padding: 0 10px 0 10px !important;

}



.change-td {

text-align: center !important;

padding: 20px !important;

}



.chapter-email-type {

font-size: 15px !important;

line-height: 21px !important;

text-align: center !important;

}



.chapter-name {

font-size: 19px !important;

line-height: 24px !important;

text-align: center !important;

}



.cm-image {

width: 60% !important;

}



.cm-image-bottom {

width: 60% !important;

display: inline-block !important;

}



.cm-text {

font-size: 17px !important;

line-height: 23px !important;

}



.cm-td {

text-align: center !important;

}



.cm-text-td {

text-align: center !important;

font-size: 16px !important;

line-height: 21px !important;

padding: 40px 20px 40px 20px !important;

}



.coral-headline-only-row {

padding: 0px 20px 0px 20px !important;

}



.date {

font-size: 22px !important;

line-height: 25px !important;

text-align: center !important;

}



.feature-row {

padding: 0px 20px 0 20px !important;

}



.feature-row-text {

padding: 20px 20px 0px 20px !important;

}



.feature-td {

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.feature-td2 {

padding: 0px !important;

}



.feature-copy {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

margin-bottom: 0px !important;

text-align: left !important;

}



.full-masthead {

padding: 0px 10px 0 10px !important;

}



.float-img-td {

vertical-align: bottom !important;



}



.float-img {

float: none !important;

margin: auto !important;

vertical-align: bottom !important;

width: 60% !important;

}



.float-img img {

width: 100% !important;

}



.GCHE_Signoff {

width: 180px !important;

}



.gclogo {

width: 70% !important;

}



.gray-spacer-td {

padding: 20px !important;

}



.headline {

font-size: 20px !important;

line-height: 26px !important;

margin-bottom: 10px !important;

}



.headline2 {

font-size: 26px !important;

line-height: 32px !important;

margin-bottom: 0px !important;

}



.headline-only-row {

padding: 0px 20px 0px 20px !important;

}



.himss-logo-td {

text-align: center !important;

padding: 0px 10px 0px 0px !important;

}



.EVENT_Logo {

width: 200px !important;

align: center !important;

}



.EVENT_Logo_Signoff {

width: 125px !important;

}



.Intl_Logo_Signoff {

width: 250px !important;

}



.intl_logo-td {

text-align: center !important;

}



.hotel {

width: 70px !important;

margin-bottom: 10px !important;

}



.icon-td {

padding: 0px 0px 10px 0px !important;

}



.stack-column-center {

padding: 0px !important;

}



.logo-td {

padding: 20px 0px 20px 0px !important;

}



.location {

font-size: 15px !important;

line-height: 21px !important;

text-align: center !important;

margin-bottom: 0px !important;

}



.masthead-td {

padding: 20px 0px 20px 0px !important;

text-align: center !important;

}



.masthead-td-awards {

padding: 0px 0px 0px 0px !important;

text-align: center !important;

}



.masthead-logo {

text-align: center !important;

}



.masthead-logo-awards {

text-align: center !important;

padding: 20px !important;

}



.no-show {

display: none !important;

}



.ol {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

color: #666666 !important;

}



.paragraph-only-row {

padding: 0px 20px 0px 20px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.right_now {

width: 150px !important;

}



.reg-open {

font-size: 25px !important;

line-height: 31px !important;

}



.section-head {

font-size: 17px !important;

line-height: 23px !important;

}



.show {

display: inline !important;

}



.showbar {

display: inline !important;

}



.social-icon {

width: 25px !important;

}



.social-icon-tv {

width: 70px !important;

}



.section-head {

font-size: 17px !important;

line-height: 22px !important;

text-align: left !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.stack-column-center-logo {

padding: 0px 0px 10px 0px !important;

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}



.subhead {

font-size: 15px !important;

line-height: 21px !important;

margin-bottom: 20px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.subhead2 {

font-size: 15px !important;

line-height: 21px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.subhead-only {

margin: 0px 20px 0px 20px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.subhead-only-row {

padding: 0px 20px 0px 20px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.theme-td {

padding: 20px 0px 20px 0px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.three-column-td {

padding: 0px 20px 0px 20px !important;

border: none !important;

}



.three-column-news-text img {

width: 100% !important;

}



.top-feature-row {

padding: 20px 20px 20px 20px !important;

font-size: 20px !important;

line-height: 24px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.twocol-plain-text {

font-size: 13px !important;

line-height: 16px !important;

text-align: center !important;

}



.two-column-td {

padding: 0px 20px 0px 20px !important;

border: none !important;

}



.two-column-td-last {

padding: 0px 20px 30px 20px !important;

border: none !important;

}



.two-column2 {

padding: 30px 30px 40px 30px !important;

}



.two-column-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.two-column-icon {

padding: 0px 20px 0px 20px !important;

}



.ul {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

color: #666666 !important;

}

}



@media only screen and (max-width: 480px) {



.ad-row {

padding: 0px 20px 0px 20px !important;

}



.awards-masthead {

text-align: center !important;

align: center !important;

}



.awards {

width: 200px !important;

}



.barbreak {

display: none !important;

}



.burst img {

width: 90% !important;

}



.bg-headline-only-row {

padding: 20px !important;

}



.body-copy {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

}



.body-copy2 {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

}



.body-subhead {

margin-bottom: 10px !important;

font-size: 15px !important;

line-height: 21px !important;

}



.bottom-button {

padding: 20px 20px 20px 20px !important;

}



.button-left-row {

padding: 0px 20px 0px 20px !important;

}



.button-middle-row {

padding: 0px 20px 0px 20px !important;

}



.button-right-row {

padding: 0px 20px 0px 20px !important;

}



.center-on-narrow {

padding: 0 10px 0 10px !important;

}



.change-td {

text-align: center !important;

padding: 20px !important;

}



.chapter-email-type {

font-size: 15px !important;

line-height: 21px !important;

text-align: center !important;

}



.chapter-name {

font-size: 19px !important;

line-height: 24px !important;

text-align: center !important;

}



.cm-image {

width: 60% !important;

}



.cm-image-bottom {

width: 60% !important;

display: inline-block !important;

}



.cm-td {

text-align: center !important;

}



.cm-text-td {

text-align: center !important;

font-size: 16px !important;

line-height: 21px !important;

padding: 20px 20px 40px 20px !important;

}



.cm-td {

text-align: center !important;

}



.cm-text {

font-size: 17px !important;

line-height: 23px !important;

}



.coral-headline-only-row {

padding: 0px 20px 0px 20px !important;

}



.date {

font-size: 22px !important;

line-height: 25px !important;

text-align: center !important;

}



.date_align {

text-align: center !important;

}



.eventDate {

text-align: center !important;

font-size: 21px !important;

line-height: 24px !important;

}



.EIABImage {

text-align: center !important;

padding: 30px 0 0 0 !important;

}



.feature-row {

padding: 0px 20px 0px 20px !important;

}



.feature-row-text {

padding: 20px 20px 0px 20px !important;

}



.feature-td {

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.feature-copy {

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

margin-bottom: 0px !important;

text-align: left !important;

}



.footer {

padding: 40px 20px 0px 20px !important;

}



.full-masthead {

padding: 0px 10px 0 10px !important;

}



.GCHE_Signoff {

width: 180px !important;

}



.gclogo {

width: 70% !important;

}



.gray-spacer-td-lg {

padding: 20px !important;

}



.gray-spacer-td-sm {

padding: 10px 20px 10px 20px !important;

}



.headline {

font-size: 20px !important;

line-height: 26px !important;

margin-bottom: 10px !important;

}



.headline2 {

font-size: 25px !important;

line-height: 31px !important;

margin-bottom: 0px !important;

}



.headline-only-row {

padding: 0px 20px 0px 20px !important;

}



.himss-logo-td {

text-align: center !important;

padding: 0px 10px 0px 0px !important;

}



.EVENT_Logo {

width: 200px !important;

align: center !important;

}



.EVENT_Logo_Signoff {

width: 125px !important;

}



.hotel {

width: 70px !important;

margin-bottom: 10px !important;

}



.intl_logo {

width: 300px !important;

align: center !important;

}



.intl_logo-td {

padding: 20px !important;

text-align: center !important;

}



.icon-td {

padding: 0px 0px 10px 0px !important;

}



.stack-column-center {

padding: 0px !important;

}



.logo-td {

padding: 20px 0px 20px 0px !important;

}



.location {

font-size: 15px !important;

line-height: 21px !important;

text-align: center !important;

margin-bottom: 0px !important;

}



.masthead-td {

padding: 20px 0px 20px 0px !important;

text-align: center !important;

}



.masthead-td-awards {

padding: 0px 0px 0px 0px !important;

text-align: center !important;

}



.masthead-logo {

text-align: center !important;

align: center !important;

}



.masthead-logo-awards {

text-align: center !important;

padding: 20px !important;

}



.no-show {

display: none !important;

}



.ol {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

color: #666666 !important;

}



.paragraph-only-row {

padding: 0px 20px 0px 20px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.reg-open {

font-size: 25px !important;

line-height: 31px !important;

}



.right_now {

width: 150px !important;

}



.section-head {

font-size: 17px !important;

line-height: 23px !important;

}



.show {

display: inline !important;

}



.showbar {

display: inline !important;

}



.social-icon {

width: 25px !important;

}



.social-icon-tv {

width: 70px !important;

}



.section-head {

font-size: 17px !important;

line-height: 22px !important;

text-align: left !important;

}



.stack-column-center-logo {

padding: 0px 0px 10px 0px !important;

display: block !important;

width: 100% !important;

max-width: 100% !important;

direction: ltr !important;

}



.subhead {

font-size: 15px !important;

line-height: 21px !important;

margin-bottom: 20px !important;

}



.subhead2 {

font-size: 15px !important;

line-height: 21px !important;

}



.subhead-only {

margin: 0px 20px 0px 20px !important;

}



.subhead-only-row {

padding: 0px 20px 0px 20px !important;

}



.theme-td {

padding: 20px 0px 20px 0px !important;

}



.three-column-td {

padding: 0px 20px 0px 20px !important;

border: none !important;

}



.top-feature-row {

padding: 20px 20px 10px 20px !important;

font-size: 20px !important;

line-height: 24px !important;

font-family: 'Prometo', 'Trebuchet MS', 'Verdana', sans-serif !important;

}



.two-column-td {

padding: 0px 20px 0px 20px !important;

border: none !important;

}



.two-column-td-last {

padding: 0px 20px 30px 20px !important;

border: none !important;

}



.two-column2 {

padding: 30px 30px 40px 30px !important;

}



.two-column-text {

padding: 0px !important;

border: none !important;

padding: 0px !important;

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

}



.two-column-icon {

padding: 0px 20px 0px 20px !important;

}



.ul {

font-family: 'Century Gothic', 'Avenir', sans-serif !important;

font-size: 13px !important;

line-height: 19px !important;

text-align: left !important;

color: #666666 !important;

}

}

</style>

<!--[if gte mso 9]><xml>

  <o:OfficeDocumentSettings>

  <o:AllowPNG/>

  <o:PixelsPerInch>96</o:PixelsPerInch>

  </o:OfficeDocumentSettings>

</xml><![endif]-->

</head>



<body style="padding: 0px; margin: 0px; width: 100%; mso-line-height-rule: exactly">

<!-- Email Wrapper : BEGIN -->

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%"

style="margin: auto; background-color: #1e22aa" bgcolor="#1e22aa" class="wrapper">

<tbody>

<tr>

<td>

<!--Email Body: BEGIN --->

<table cellspacing="0" cellpadding="0" border="0" align="center" width="650" style="margin: auto;"

class="email-container" role="presentation">

<tbody>

<tr>

<td class="mktoContainer" id="masterContainer">

<table class="mktoModule" id="H24Mastheadcrop" MktoName="Masterhead" width="100%">

<tbody>

<tr>

<td width="100%" style="padding: 0px 0px 0px 0px;">

<table border="0" cellspacing="0" cellpadding="0" width="100%">

<tbody>

<tr>

<td width="100%" style="padding: 0px 0px 0px 0px;">

<table border="0" cellspacing="0" cellpadding="0"

width="100%">

<tbody>

<tr>

<td>

<div class="mktoImg"

id="H24MastheadImage" MktoName="MasterHead">

<a href="#"> <img

src="https://pages.himss.org/rs/420-YNA-292/images/H24_Heartgirl_Takemethere_hero.png"

width="650" height=""

alt="Creating Tomorrow's Health"

border="0"

style="width: 100%; max-width: 650px; margin-bottom: 0px; color: #666666; font-size: 20px; font-family: 'Century Gothic', 'Avenir', sans-serif; font-weight : normal" />

</a>

</div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<table class="mktoModule"

id="WhiteSocialIconsImage574769d7-e7a7-4cb4-91d3-f42a3750a324" MktoName="WhitesocialImage" align="center">

<!--Header----->

<tbody>

<tr>

<td align="center" height="100%" valign="top" width="100%"

style="padding-top: 0px">

<!--[if (gte mso 9)|(IE)]>

                        <table align="center" border="0" cellspacing="0" cellpadding="0" width="650">

                        <tr>

                        <td align="center" valign="top" width="650">

                        <![endif]-->

<table>

<tbody>

<tr>

<th colspan="2" class="masthead-logo" valign="middle"

style="padding: 0px 0px 20px 0px;"> <a href="#">

<img src="https://pages.himss.org/rs/420-YNA-292/images/HIMSS_Logo_Animated_wFade.gif"

width="200" height="" alt="EVENT" border="0"

style="width: 100%; max-width: 200px; color: #FFFFFF; font-size: 13px; font-family: 'Century Gothic', 'Avenir', sans-serif; font-weight: normal;"

class="EVENT_Logo" /> </a> </th>

</tr>

<!--Header End----->

<tr>

</tr>

<tr style="background-color: #1e22aa;" bgcolor="#1e22aa">

<td bgcolor="#FFFFFF" dir="ltr" align="center"

valign="bottom" width="100%"

style="padding: 0px 0px 0px 0px; background-color: #FFFFFF;"

class="three-column-td">

<table bgcolor="#FFFFFF" role="presentation"

align="center" border="0" cellpadding="0"

cellspacing="0" width="100%"

style="background-color: #FFFFFF">

<tbody>

<tr bgcolor="#FFFFFF"

style="background-color: #FFFFFF">

<!-- Left Column : BEGIN -->

<td bgcolor="#FFFFFF" width="33%"

class="stack-column-center-logo"

valign="top"

style="background-color: #FFFFFF; padding: 0px 0px 0px 0px;border-right: 5px solid #1e22aa;">

<table role="presentation"

align="center" border="0"

cellpadding="0" cellspacing="0"

width="100%" bgcolor="#FFFFFF"

style="background-color: #FFFFFF;">

<tbody>

<tr bgcolor="#FFFFFF"

style="background-color: #FFFFFF">

<td valign="top"

style="padding: 0px 0px 0px 0px; background-color: #FFFFFF; font-family: 'Century Gothic', 'Avenir', sans-serif; font-size: 12px; text-align: left; line-height: 17px; color: #666666;text-align: center;"

class="three-column-text"

bgcolor="#FFFFFF">

<div class="mktoText"

id="leftcontent294a639e-f00a-4228-877c-94a678119725" 

style="text-align:center; width: auto;" mktoName="leftcontent">

<h2

style="color: #1e22aa;font-size: 16px;line-height: 24px;">

Membership

</h2>

<p>Want to learn

about the

benefits of

becoming a

HIMSS</p>

<br />

<br />

<div>

<!--[if mso]>

                                                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:56px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1e22aa" fillcolor="#FFFFFF">

                                                    <w:anchorlock/>

                                                    <center style="color:#1e22aa;font-family:'Trebuchet MS', 'Verdana',sans-serif;font-size:13px;font-weight:bold;">Button Text</center>

                                                  </v:roundrect>

                                                <![endif]-->

<a href="${threeColumnButtonLeft}"

                                                                                                          style="background-color:#1e22aa;border-radius:20px;color:#FFFFFF;display:inline-block;font-family:'Trebuchet MS', 'Verdana',sans-serif; font-size:14px;font-weight:bold;line-height:35px;text-align:center;

                                                                                                                 text-decoration:none;width:${buttonWidth}px;-webkit-text-size-adjust:none;" class="${buttonClass}">

                                                                                                                    <span mktoName="Button Text2">${buttonText2}</span>

                                                                                                                              </a>

                                                                                                          

</div>

</div>

</td>

</tr>

</tbody>

</table>

</td>

<!-- Left Column : END -->

<!-- Middle Column : BEGIN -->

<td bgcolor="#FFFFFF" width="33%"

class="stack-column-center-logo"

valign="top"

style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; border-right: 5px solid #1e22aa;">

<table role="presentation"

align="center" border="0"

cellpadding="0" cellspacing="0"

width="100%" bgcolor="#FFFFFF"

style="background-color: #FFFFFF;">

<tbody>

<tr bgcolor="#FFFFFF"

style="background-color: #FFFFFF">

<td valign="top"

style="padding: 0px 20px 0px 0px; background-color: #FFFFFF; font-family: 'Century Gothic', 'Avenir', sans-serif; font-size: 12px; text-align: left; line-height: 17px; color: #666666"

bgcolor="#FFFFFF"

class="three-column-text">

<div class="mktoText"

id="middlecontent54c4c9d3-4210-471b-b040-d9623bcc3480" MktoName="Middle"

style="text-align: center;">

<h2

style="color: #1e22aa;font-size: 16px;line-height: 24px;">

Save the

Date</h2>

<p>HIMSS24

European

Health

Conference

and

Exhibition

</p>

<p>May 29-31,

2024</p>

<p>Rome, Italy

</p>

<p>More info

coming soon!

</p>

</div>

</td>

</tr>

</tbody>

</table>

</td>

<!-- Middle Column : END -->

<!-- Right Column : BEGIN -->

<td bgcolor="#FFFFFF" width="33%"

class="stack-column-center-logo"

valign="top"

style="background-color: #FFFFFF; padding: 0px 0px 0px 0px">

<table role="presentation"

align="center" border="0"

cellpadding="0" cellspacing="0"

width="100%" bgcolor="#FFFFFF"

style="background-color: #FFFFFF">

<tbody>

<tr bgcolor="#FFFFFF"

style="background-color: #FFFFFF">

<td valign="top"

style="padding: 0px 20px 0px 0px; background-color: #FFFFFF; font-family: 'Century Gothic', 'Avenir', sans-serif; font-size: 12px; text-align: left; line-height: 17px; color: #666666;text-align: center;"

bgcolor="#FFFFFF"

class="three-column-text">

                                                                                                  

<div class="mktoText"

id="rightContent35fb1f65-11ef-4551-ba30-14dcdf09dc57" mktoName="right">

<h2

style="color: #1e22aa;font-size: 16px;line-height: 24px;">

Events</h2>

<p>Learn more

about the

events and

webinars

HIMSS hosts

year-round

</p>

                                                                                                      </div>

<br />

<br />

<div>

<!--[if mso]>

                                                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:56px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1e22aa" fillcolor="#FFFFFF">

                                                    <w:anchorlock/>

                                                    <center style="color:#1e22aa;font-family:'Trebuchet MS', 'Verdana',sans-serif;font-size:13px;font-weight:bold;">Button Text</center>

                                                  </v:roundrect>

                                                <![endif]-->

                                                                                                          <a href="${threeColumnButtonRight}" style="background-color:#FFFFFF;border:2px solid #1e22aa;border-radius:20px;color:#1e22aa;display:inline-block;font-family:'Trebuchet MS', 'Verdana',sans-serif;

                                                                                                                             font-size:13px;font-weight:bold;line-height:36px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;"><span>${buttonText}</span></a>

                                             

                                                                                                          

                                                                                                          

</div>



</td>

</tr>

</tbody>

</table>

</td>

<!-- Right Column : END -->

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<table class="mktoModule ThemeRibbon" id="H24ThemeCTR" mktoName="ThemeCTR" border="0" cellpadding="0"

cellspacing="0" width="100%" bgcolor="#1e22aa;"

style="background-color: #1e22aa;">

<tbody>

<tr>

<td width="100%"

style="padding: 20px 0px 10px 0px; background-color: #1e22aa">

<table role="presentation" align="center" border="0" cellpadding="0"

cellspacing="0" width="100%" bgcolor="#1e22aa"

style="background-color: #1e22aa">

<tbody>

<tr>

<td>

<center>

<img src="https://pages.himss.org/rs/420-YNA-292/images/HIMSS24_FooterThemeline.png"

width="70%" height=""

alt="Creating Tomorrow's Health"

style="width: 70%; max-width: 400px; margin-bottom: 0px; color: #ffffff; font-size: 20px; font-family: 'Century Gothic', 'Avenir', sans-serif; font-weight : normal" />

</center>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<table class="mktoModule" id="WhiteSocialIcons" MktoName="socialIcon" align="center">

<!--Social Start----->

<tbody>

<tr>

<td align="center" height="100%" valign="top" width="100%"

style="padding-top: 0px">

<!-- [if (gte mso 9)|(IE)]> -->



<table align="center" border="0" cellspacing="0" cellpadding="0"

width="650">



<tr>

<td align="center" valign="top" width="650">

<!-- <![endif]-->

<table>

<tbody>

<tr>

<td style="padding: 30px 0px 0px 0px; white-space: nowrap"

nowrap="nowrap" class="social_links"> <a

href="https://info.himss.org/NDIwLVlOQS0yOTIAAAGOtgw6zUCaWBJasKfPZ1S6u440Lp66OO4EFbZwdF4mK7KbFxaIy7rixceMYwMgWjn0qNIfVtQ="

target="_blank"

title="Facebook"><img

src="http://pages.himss.org/rs/420-YNA-292/images/facebook_09122019.png"

width="35" height="" border="0"

alt="Facebook"

class="social-icon" style="font-size: 11px; font-family: 'Century Gothic', 'Avenir', sans-serif; 

color: #FFFFFF" /></a> <img src="https://pages.himss.org/rs/420-YNA-292/images/15x5_spacer_1e22aa.png" width="15"

height="5" /> <a

href="https://info.himss.org/NDIwLVlOQS0yOTIAAAGOtgw6zdqhehR7hpqF5_-g-Zt4ZRzy7tKNxMJWI5H7xJOYyaNq1Z_sJM8JlyFDJnpAhqzBenM="

target="_blank" title="Twitter"><img

src="http://pages.himss.org/rs/420-YNA-292/images/twitter_09122019.png"

width="35" height="" border="0"

alt="Twitter"

class="social-icon" style="font-size: 11px; font-family: 'Century Gothic', 

'Avenir', sans-serif; color: #FFFFFF" /></a> <img src="https://pages.himss.org/rs/420-YNA-292/images/15x5_spacer_1e22aa.png"

width="15" height="5" /> <a

href="https://info.himss.org/NDIwLVlOQS0yOTIAAAGOtgw6zckPwpoB4rQnum_D0GHhPa6ZTzaFq39VDH0AkkkSQ_ICqGOfGCrIXcYICUNyXkgkv2E="

target="_blank"

title="LinkedIn"><img

src="http://pages.himss.org/rs/420-YNA-292/images/linkedin_09122019.png"

width="35" height="" border="0"

alt="LinkedIn"

class="social-icon" style="font-size: 

11px; font-family: 'Century Gothic', 'Avenir', sans-serif; color: #FFFFFF" /></a> <img

src="https://pages.himss.org/rs/420-YNA-292/images/15x5_spacer_1e22aa.png"

width="15" height="5" /> <a

href="hhttps://www.instagram.com/himssglobal"

target="_blank"

title="LinkedIn"><img

src="https://pages.himss.org/rs/420-YNA-292/images/insta.png"

width="35" height="" border="0"

alt="Instagram"

class="social-icon"

style="font-size: 11px; font-family: 'Century Gothic', 'Avenir', sans-serif; color: #FFFFFF" /></a>

<img src="https://pages.himss.org/rs/420-YNA-292/images/15x5_spacer_1e22aa.png"

width="15" height="5" /> <a

href="https://info.himss.org/NDIwLVlOQS0yOTIAAAGOtgw6zQOLJ4sZREp_tiOvaag-ShIBleUnY8muDBp8aZh-3SvbCKjvUg27D22-_qL_o-JZu2k="

target="_blank"

title="HIMSS TV"><img

src="http://pages.himss.org/rs/420-YNA-292/images/HIMSSTV_Logo_040520222.png"

width="90" height="" border="0"

alt="HIMSS TV"

class="social-icon-tv"

style="font-size: 11px; font-family: 'Century Gothic', 'Avenir', sans-serif; color: #FFFFFF" /></a>

</td>

</tr>

</tbody>

</table>

<!-- [if (gte mso 9)|(IE)]> -->

</td>



</tr>



</table>

<!-- <![endif]-->

</td>

</tr>

<!--Social End----->

</tbody>

</table>

<table class="mktoModule" id="whiteoptout" MktoName="whiteoutput" align="center">

<!--opt out : START---->

<tbody>

<tr>

<td>

<table align="center" border="0" cellspacing="0" cellpadding="10">

<tbody>

<tr valign="middle">

<td align="center"

style="font-family: sans-serif; font-size:12px; line-height: 24px; text-align: center; color:#FFFFFF">

<span class="mktoText"

id="SingleAdmiralOpt-Out_Gray" mktoName="SingleAdmin">HIMSS&nbsp;&nbsp;|&nbsp;&nbsp;<strong

style="color: #54c0e8;">312.664.4467</strong><br />

350 N Orleans Street, Suite S10000, Chicago IL,

60654 <br /> You are receiving this because you

opted-in to receive emails from

HIMSS.<br /><br /> <a class="mktNoTrack"

href="https://www.himss.org/himss-legal"

target="_blank" title="Preferences"

style="color:#54c0e8;">

<strong>Privacy</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a

class="mktNoTrack"

href="https://pages.himss.org/LP-HIMSS-Global-Unsubscribe.html"

target="_blank" title="Preferences"

style="color:#54c0e8;"><strong

style="color: #54c0e8">Unsubscribe</strong></a></span>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

<!--opt out : END------>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<!-- Himss MastFooter: END -->

</td>

</tr>

</tbody>

</table>

<!--Email Body: END ------>

<br />

<br />

<br />

<!--Email Wrapper: END --------->

<a

href="https://info.himss.org/NDIwLVlOQS0yOTIAAAGOtgw6ze8bxmkPf7UYg49HT8tpzTpg7f-uib4oYbC7vm4LJL2XqczZfHsmwtOQG6dz_DS-ZSA="></a>

<img src="https://info.himss.org/trk?t=1&mid=NDIwLVlOQS0yOTIAAAGOtgw6zc_XVENq80JvSS3fS4_qplwdEHDuNxLVKijARSH3ORUXKFxACaq6lpO-a64LR5ueD7WDOx4_tCSaQBKSJKYibO7RItCQ52wagDUGJYn2AEuH2rLaxqIw"

width="1" height="1" style="display:none !important;" alt="" />



.

</body>



</html>

Dave_Roberts · ‎10-18-2023

As Jo mentioned, you'll want to replace the "#" in the VML code with the same variable you've got in the link below. It might look commented out, but that comment isn't a generic HTML comment, it's a Microsoft conditional comment which will actually show up in Outlook. Here's a link to check out more info on the [if MSO] comment: https://stackoverflow.design/email/base/mso/

In short, these bits of code allow you to target specific versions (or all versions in this case) of the Microsoft Office rendering engine to display bits of code that every other civilized email service will ignore.

For this reason, you'll want to make sure that anything you've got going on with your buttons is also reflected in the MSO (VML) code blocks as well -- this might include the styles for the button such as stroke and fill color and font-family, font-size, etc.

Let me know if you have any questions or if there's anything else I can do to help ya out here. It looks like most of your buttons have the VML code above the button code block so this may need to happen in more than one place throughout the template, but it looks like most of the VML code is just above the button itself and starts with ""

View solution in original post

Dave_Roberts · ‎10-11-2023

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:56px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1e22aa" fillcolor="#FFFFFF">

It looks like the VML (Outlook) code you're using for the buttons has the href attribute set to "#". When there is not a link in there, Outlook doesn't recognize the button as a link and does some weird things to display it. This might be what's causing the issue for you, but should probably be fixed even if it's not what's causing the buttons to display wonky.

You could grab the link variable (ex: ${threeColumnButtonRight} ) from the <a> element and place that into your VML code to replace the "#" and see if that fixes the issue here maybe?

Chris_Francis1 · ‎10-11-2023

Hi,

Thanks for your response. I don't think I added any LML code. It is currently under a note in the code. Should i add it and where should it be added?

Thanks for your response on this

Jo_Pitts1 · ‎10-11-2023

@Chris_Francis1 ,

from your pasted code:

The # in the href should be the same Marketo variable as used in the non-outlook button. (i.e. ${threeColumnButtonLeft})

Also, I've reformatted your post to use the code format/highlighter.

Cheers

Jo

Dave_Roberts · ‎10-18-2023

As Jo mentioned, you'll want to replace the "#" in the VML code with the same variable you've got in the link below. It might look commented out, but that comment isn't a generic HTML comment, it's a Microsoft conditional comment which will actually show up in Outlook. Here's a link to check out more info on the [if MSO] comment: https://stackoverflow.design/email/base/mso/

In short, these bits of code allow you to target specific versions (or all versions in this case) of the Microsoft Office rendering engine to display bits of code that every other civilized email service will ignore.

For this reason, you'll want to make sure that anything you've got going on with your buttons is also reflected in the MSO (VML) code blocks as well -- this might include the styles for the button such as stroke and fill color and font-family, font-size, etc.

Let me know if you have any questions or if there's anything else I can do to help ya out here. It looks like most of your buttons have the VML code above the button code block so this may need to happen in more than one place throughout the template, but it looks like most of the VML code is just above the button itself and starts with ""