Hi team,
I’m desperated for your help.
I’m having some issues with the button display on Outlook - old version. In short, the black button on white background does not show up on old Outlook. Not sure if it’s a bug from Klaviyo or it’s just because of Outlook. Kindly help to check.
I have attached below 2 images for illustration of how it looks on Klaviyo and on Old Outlook.
On Klaviyo:
On Outlook - old version:
I’m really looking forward to your response. Thank you so much!
Best regards,
Anh
Hey
Old versions of Outlook use Microsoft Word's rendering engine instead of standard web rendering, which often causes display issues with buttons.
I would suggest you use VML (Vector Markup Language) for Outlook, while maintaining standard HTML for other email clients.
Would you be able to share your current button code so I can provide more specific guidance?
Cheers
Arpit
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title> </title> <!--[if !mso]><!--> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <!--<![endif]--> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <meta content="width=device-width, initial-scale=1" name="viewport"/> <!--[if mso]> <noscript> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <![endif]--> <!--[if lte mso 11]> <style type="text/css" data-inliner="ignore"> .mj-outlook-group-fix { width:100% !important; } </style> <![endif]--> <style>a:not([name]) {color:#000;text-decoration:underline} a:link {color:#000;text-decoration:underline} a:visited {color:#000;text-decoration:underline} a:active {color:#000;text-decoration:underline} a:hover {color:#000;text-decoration:underline}</style><style>#outlook a { padding: 0 } body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } table, td { border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0 } img { border: 0; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic } p { display: block; margin: 13px 0 } @media only screen and (min-width: 480px) { .mj-column-per-100 { width: 100% !important; max-width: 100% } } .moz-text-html .mj-column-per-100 { width: 100% !important; max-width: 100% } @media only screen and (max-width: 480px) { div.kl-row.colstack div.kl-column { display: block !important; width: 100% !important } } @media only screen and (max-width: 480px) { .component-wrapper .mob-no-spc { padding-left: 0 !important; padding-right: 0 !important } } .kl-button a { display: block !important } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100% } .root-container { background-repeat: repeat !important; background-size: auto !important; background-position: left top !important } .root-container-spacing { padding-top: 50px !important; padding-bottom: 20px !important; font-size: 0 !important } .content-padding { padding-left: 0 !important; padding-right: 0 !important } .content-padding.first { padding-top: 0 !important } .content-padding.last { padding-bottom: 0 !important } @media only screen and (max-width: 480px) { td.mobile-only { display: table-cell !important } div.mobile-only { display: block !important } table.mobile-only { display: table !important } .desktop-only { display: none !important } } @media only screen and (max-width: 480px) { .table-mobile-only { display: table-cell !important; max-height: none !important } .table-mobile-only.block { display: block !important } .table-mobile-only.inline-block { display: inline-block !important } .table-desktop-only { max-height: 0 !important; display: none !important; mso-hide: all !important; overflow: hidden !important } } p { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-bottom: 1em } @media only screen and (max-width: 480px) { body.mce-content-body, /* NOTE: needed for internal tinymce styles */.kl-text > div, .kl-table-subblock div, .kl-split-subblock > div { font-size: 14px !important; line-height: 1.3 !important } } h1 { color: #000; font-family: Helvetica, Arial; font-size: 40px; font-style: normal; font-weight: normal; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 20px; text-align: left } @media only screen and (max-width: 480px) { h1 { font-size: 40px !important; line-height: 1.1 !important } } h2 { color: #000; font-family: Helvetica, Arial; font-size: 32px; font-style: normal; font-weight: bold; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 16px; text-align: left } @media only screen and (max-width: 480px) { h2 { font-size: 32px !important; line-height: 1.1 !important } } h3 { color: #000; font-family: Helvetica, Arial; font-size: 24px; font-style: normal; font-weight: bold; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 12px; text-align: left } @media only screen and (max-width: 480px) { h3 { font-size: 24px !important; line-height: 1.1 !important } } h4 { color: #000; font-family: Helvetica, Arial; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 9px; text-align: left } @media only screen and (max-width: 480px) { h4 { font-size: 18px !important; line-height: 1.1 !important } } @media only screen and (max-width: 480px) { .root-container { width: 100% !important } .root-container-spacing { padding: 10px !important } .content-padding { padding-left: 0 !important; padding-right: 0 !important } .content-padding.first { padding-top: 0 !important } .content-padding.last { padding-bottom: 0 !important } .kl-column > .component-wrapper { padding-left: 0 !important; padding-right: 0 !important; width: unset !important } .kl-text { padding-right: 18px !important; padding-left: 18px !important } }</style></head> <body style="word-spacing:normal;background-color:#f7f7f7;"> <div class="root-container" id="bodyTable" style="background-color:#f7f7f7;"> <div class="root-container-spacing"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section" role="presentation" style="width:100%;"> <tbody> <tr> <td> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:600px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:0px 0px 0px 0px;max-width:600px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:0px 0px 0px 0px;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]--> <div class="content-padding first last"> <!--[if true]><table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;direction:ltr"><tr><![endif]--> <div class="kl-row colstack" style="display:table;table-layout:fixed;width:100%;"> <!--[if true]><td style="vertical-align:top;width:600px;"><![endif]--> <div class="kl-column" style="display:table-cell;vertical-align:top;width:100%;"> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:50px;padding-right:30px;padding-bottom:10px;padding-left:30px;word-break:break-word;"> <div style="font-family:Helvetica, Arial;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#000000;"><p style="padding-bottom:0; text-align:center"><span style="font-size: 45px;"><strong>White Blackground</strong></span></p></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="rgba(0,0,0,1)" role="presentation" style="border:none;border-bottom:solid 2px #000000;border-left:solid 2px #000000;border-radius:1px;border-right:solid 2px #000000;border-top:solid 2px #000000;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:rgba(0,0,0,1);" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:rgba(0, 0, 0, 1); color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> black CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="rgba(0,0,0,1)" role="presentation" style="border:none;border-radius:1px;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:rgba(0,0,0,1);" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:rgba(0, 0, 0, 1); color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> black CTA no border </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="#F0D1DF" role="presentation" style="border:none;border-bottom:solid 2px #F0D1DF;border-left:solid 2px #F0D1DF;border-radius:1px;border-right:solid 2px #F0D1DF;border-top:solid 2px #F0D1DF;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:#F0D1DF;" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:#F0D1DF; color:#000; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> pink CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-bottom:solid 2px #000000;border-left:solid 2px #000000;border-radius:1px;border-right:solid 2px #000000;border-top:solid 2px #000000;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:#FFFFFF;" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:#FFF; color:#000; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> color CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> <!--[if true]></td><![endif]--> </div> <!--[if true]></tr></table><![endif]--> </div> <!--[if mso | IE]></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> </div> </body> </html>
Hi Arpit, I use drag n drop to create the button. Please find the HTML extracted above. Thank you!
I’ve also encountered this issue with the Klaviyo drag-and-drop button disappearing in my Outlook (app, online, and desktop app).
Klaviyo's chat escalated my issue. When I got a response, there were no additional resources besides the suggestion to use an image instead, but obviously, that’s not a great solution with many Outlook clients needing to allow images or “Trust sender” to see images.
I might be testing some of these options, but if Klaviyo doesn’t have a bulletproof drag-and-drop button and requires that I code my own… not a great tool. I hope it’s just a bug that gets fixed ASAP - we need buttons!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.