• Features
    All Features Email Previews
    Builder Checklist Spam Testing Email Analytics Litmus Extension
  • Pricing
  • Resources
    Resources Litmus Conference Convince Your Team Gmail Promotions Builder
  • Enterprise
  • Community
    Discussions Snippets Templates Jobs
  • Blog
  • Sign In
  • Litmus
  • Features
  • Pricing
  • Resources
  • Enterprise
  • Blog
  • Community
  • Discussions
  • Snippets
  • Templates
  • Jobs
  • My Account
  • Sign In
  • Community Home
  • Discussions
  • Learning
  • Snippets
  • Templates
  • Jobs
Avatar of Lee BorowiakLB

Lee Borowiak

  • Senior Web Developer at LB Digital
  • Australia
  • http://www.lb-digital.com/

Frontend HTML/CSS + Wordpress ACF Developer - Queensland, Australia.

Joined on November 30, 2018
    Replied to Discussion: Outlook and Fallback Fonts by Lee Borowiak 2021-09-27 09:34:28

    Hi John,

    Have you tried using @media screen ?

    
        /* Load Google fonts through @media screen so Outlook 2007/2010/2013/2016 doesn't default to Times New Roman. Litmus uses @font-face with their newsletters too! */
        @media screen {
    
            @font-face {
                font-family: 'Heebo';
                font-style: normal;
                font-weight: 300;
                src: local('Heebo Light'), local('Heebo-Light'), url(https://fonts.gstatic.com/s/heebo/v3/NGS3v5_NC0k9P9ldb6RMkK4.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }
    
        }
    
    

    I found this a few years ago in a Litmus email newsletter.

    Thanks,
    Lee.

    Replied to Discussion: How to remove margin/padding from <ul> in Outlook 365 Windows 10? by Lee Borowiak 2021-09-02 08:21:43

    Hi Robin,

    Ok I see. Do you know how often Litmus update their system to render latest versions throughout?
    Would be good to find out that information.

    Seems strange Outlook 365 would remove the ul margins, and perhaps it's all margins.

    Thanks,
    Lee.

    Replied to Discussion: How to remove margin/padding from <ul> in Outlook 365 Windows 10? by Lee Borowiak 2021-08-30 04:09:18

    Hi Joshuel,

    Using capital M for margin works good for me, like this:

    
        <!--[if (mso)|(IE)]>
        <style>
            ul {
                Margin:0;
            }
            ul li {
                Margin-left:20px;
            }
        </style>
        <![endif]-->
    
    

    I created a working demo here:
    https://litmus.com/builder/38a93ec

    I made the ul background ccc so you can see the style is targeting correctly.

    Thanks,
    Lee.

    Replied to Discussion: Stacking in gmail by Lee Borowiak 2021-03-15 07:02:15

    Hi Hyde,

    The best solution is to create a grid which doesn't rely on CSS for stacking TD or TH.
    If CSS isn't supported, then media queries won't be supported either.

    I created this grid system a year ago. This uses DIVs (and tables for MSO and IE) which automatically stack depending on browser width:
    https://litmus.com/builder/b8b7148

    Try using this.

    Thanks,
    Lee.

    Replied to Discussion: Bulletproof Buttons broken in Office 365 ProPlus? by Lee Borowiak 2020-11-19 07:04:38

    Hi Chris,

    The button code fixes the text being chopped, but yes the rounded corners only work on Outlook 2016 Mac.

    If you want a 100% bullet proof button, best to use a table with 3 TDs and use images with rounded corners for the left and right sides of the button and text in the middle.

    Something like this:

    <table border="0" cellspacing="0" cellpadding="0" style="background-color: #cccccc;">
    <tbody>
    <tr>
    <td align="left" valign="middle" bgcolor="#cccccc">img</td>
    <td align="left" valign="middle" bgcolor="#cccccc"><a href="https://litmus.com">button text</a></td>
    <td align="left" valign="middle" bgcolor="#cccccc">img</td>
    </tr>
    </tbody>
    </table>
    

    Thanks,
    Lee.

    Replied to Discussion: Bulletproof Buttons broken in Office 365 ProPlus? by Lee Borowiak 2020-11-18 03:37:00

    Hi Chris,

    I created a button which has worked great when testing in Litmus. Try this one:

    
    <a href="https://litmus.com" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;display:inline-block;width:auto;border-radius:20px;background-color: #999999;border: 2px solid #999999;mso-border-alt:10px solid #999999;mso-padding-alt:0px;">Lees button&nbsp; →</a>
    
    

    You may need to adjust a few settings, such as border-radius, padding-top, bottom, left right.
    See also mso-border-alt and mso-padding-alt.

    Let me know how you go!

    Thanks,
    Lee.

    Replied to Discussion: Adding VML code for Outlook Background Image by Lee Borowiak 2020-10-07 08:49:18

    Hi Timothy,

    I found it only works if you use px sizes. With bg-hero-600.jpg make sure this bg image is the same size as the intended space behind the text content, then specify it's size. This will then fit nicely behind your content and doesn't need to stretch by percent. Also change: fill type from 'tile' to 'frame'. This will stop the bg image from repeating.

    
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
    <v:fill type="frame" src="http://www.lb-digital.com/email/images/bg-hero-600.jpg" color="#999999" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->
    
    

    Thanks,
    Lee.

    Replied to Discussion: Adding VML code for Outlook Background Image by Lee Borowiak 2020-10-05 05:14:53

    Hi Timothy,

    Here's a basic example of a background image using VML. Here you can see where the code needs to be placed in the td.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
    
        <!-- Fix DPI Scaling Issues in Outlook -->
        <!--[if gte mso 9]><xml>
            <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml><![endif]-->
    
        <title>HTML Email Background Image by lb-digital.com</title>
    
        <!-- Character encoding -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
        <!-- Set 100% scale, allow zoom -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Remove default blue colour from links so you can style your own -->
        <meta name="format-detection" content="address=no">
        <meta name="format-detection" content="date=no">
        <meta name="format-detection" content="email=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="x-apple-disable-message-reformatting">
    
        <!-- Prevent iOS 11 from automatically scaling your email -->
        <meta name="x-apple-disable-message-reformatting">
    
        <!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
        <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!--<![endif]-->
    
        <style type="text/css">
    
        body {
            margin:0 auto;
            padding:0;
            width:100%;
            height:auto;
            font-size:15px;
            background-color:#fff;
            -webkit-text-size-adjust:100%;
            -ms-text-size-adjust:100%;
        }
        /* Outlook.com and Hotmail .ExternalClass class override */
        .ExternalClass {
            width:100%;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }
        /* Outlook 2007/2010/2013 'Read in Browser' Link */
        #outlook a {
            padding:0;
        }
        /* Outlook fix spacing left and right side of tables */
        table {
            mso-table-lspace:0pt;
            mso-table-rspace:0pt;
            border-spacing:0;
        }
        table, td {
            border-collapse:collapse; /* If you’re using border-radius, use border-collapse:separate; instead */
        }
        /* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
        img {
            -ms-interpolation-mode:bicubic;
            border:0 none;
            height:auto;
            line-height:100%;
            outline:none;
            color:#999;
            text-decoration:none;
        }
        img,
        img a,
        a img {
            border:0 none;
            font-size:15px;
            color:#666;
            text-decoration:none;
        }
        a {
            color:#666;
            text-decoration:none;
        }
        /* Remove blue links on Apple and Samsung devices */
        a[x-apple-data-detectors],
        #MessageViewBody a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
        .bg-scale {
            background-color:#999999;
            background-size:cover;
            background-repeat: no-repeat;
            background-position: center center;
        }
    
        </style>
    
    </head>
    <body>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    
        <tr>
            <td align="center" valign="top">
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                    <tr>
                        <td background="http://www.lb-digital.com/email/images/bg-hero.jpg" align="center" width="100%" valign="top" class="bg-scale" style="background-image: url('http://www.lb-digital.com/email/images/bg-hero.jpg');background-color:#999999; background-size:cover; background-repeat: no-repeat; background-position: center center;">
                        <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
                        <v:fill type="tile" src="http://www.lb-digital.com/email/images/bg-hero-600.jpg" color="#999999" />
                        <v:textbox inset="0,0,0,0">
                        <![endif]-->
                        <div>
    
                        <table width="90%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="600" align="left" valign="middle">
                                Content
                                </td>
                            </tr>
                        </table>
    
                        </div>
                        <!--[if gte mso 9]>
                        </v:textbox>
                        </v:rect>
                        <![endif]-->
                        </td>
                    </tr>               
                </table>
            </td>
        </tr>
    
    </table>
    
    </body>
    </html>
    
    

    Thanks,
    Lee.

Litmus Logo
    Company
  • Team
  • Customers
  • Careers
  • Contact
  • Brand
    Product
  • Features
  • Pricing
  • Enterprise
  • Extension
    Tools
  • Events
  • Labs
  • Scope
  • Resources
    Help
  • Knowledgebase
  • Status
  • Community
  • Trust
Subscribe to our emails

Copyright © Litmus Software, Inc. 2005-2023. 675 Massachusetts Ave., 11th Floor, Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note to hello@litmus.com or give us a call at +1 (866) 787-7030

Sign in to Community

Are you new to Litmus Community?

Create a Free Litmus Account

Use your existing Litmus login to connect with the world’s most amazing email designers.

Having trouble signing in? Try Forgot password

Join the Litmus Community

Sign up to Community

Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy
Already have a Litmus login? Sign in

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.

  • Email Previews

    Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.

  • Builder

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Checklist

    Get screenshots in popular email clients to ensure your email looks great everywhere.

  • Code Editor Integrations

    Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.

  • ESP Integrations

    Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).

  • Spam Testing

    Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.

  • Email Analytics

    Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.

  • Private Litmus Teams

    Get full team visibility. Manage Litmus access and monitor usage across private teams.

No thanks, just sign me up without a trial

Forgot password

Enter your email address to reset your password


Already have a Litmus login? Sign in