Search code examples
htmlemailoutlookhtml-emaillitmus

Outlook 2019 background color rendering bug

For some reason the white header in our emails started displaying thick grayish line going through it in outlook 2019. Other email clients work fine.

At first we thought that its just a litmus bug, but its not because it is also visible when client receives the email.

This started happening relatively recently, despite most of our emails sharing the same header, here is the screenshot (blue parts are added by me to hide client information):

enter image description here

And the code:

                <tr>
                    <td>
                        <table
                                border="0"
                                width="100%"
                                cellpadding="0"
                                cellspacing="0"
                                align="center"
                                style="width: 100%;"
                        >
                            <tr style="
                                    background-color: #FFFDFB;
                                    width: 100%;
                                    "
                                width="100%"
                            >
                                <td
                                    style="
                                    padding-left: 35px;
                                    padding-top: 25px;
                                    padding-bottom: 25px;
                                    width: 100%;"
                                    width="100%"
                                >
                                <a href="#" target="_blank" style="text-decoration: none;">
                                    <img
                                        src="logo.png"
                                        align="left"
                                        class=""
                        
                                        alt="Logo"
                                        border="0"
                                        style="margin: auto;"
                                    />
                                </a>
                                </td>
                                <td
                                    width="100%"
                                    style="
                                    text-align: right;
                                    font-size: 15px;
                                    line-height: 1;
                                    padding-bottom: 25px;
                                    padding-top: 25px;
                                    margin-top: 0px;
                                    padding-right: 35px;
                                    font-family: CUSTOM-FONT-NAME, Inter, sans-serif;
                                    margin: 0;
                                    width: 100%;
                                ">
                                    <p>
                                        <a href="#" target="_blank" style="text-decoration: none;white-space: nowrap;.">
                                            <span style="color: #a6a6a6;text-decoration: none;">myPAGE</span>
                                        </a>
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
Solution

  • My first thought would be to ditch your styling on table rows. They're literally there for structure and I'd always advise avoiding adding styling to them and instead rely on your table, table cell (td or th) or divs inside of your table cells for styling. It may have worked for you in the past, but it's one of those things I see come up from time to time on here and other platforms for email debugging and it's usually the common denominator when debugging other developers code.

    I would also avoid adding width:100% on multiple cells. I don't think it's causing issues for you, but again it's one of those things where the easier you make it for email clients to make sense of your code, the easier job you'll have to translate design to HTML. Email clients will automatically make table cells either equal widths or will adapt depending on the content in either of the cells. Telling them to go 100% in your case is almost telling email clients to basically - "Go ahead, do whatever you like." Try and either be explicit with your widths or don't declare them at all if they should divide equally. Then test and see what the results look like and go from there.

    Below is how I'd change your code. It turns out it's the align="left" on your image that is causing the issue. I'd also avoid this and declare align properties on table cells and the image will inherit that property for you.

    <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="width: 100%; background-color: #FFFDFB; ">
    <tr>
        <td align="left" style="padding-left: 35px; padding-top: 25px; padding-bottom: 25px;">
            <a href="#" target="_blank" style="text-decoration: none;">
                <img src="https://via.placeholder.com/150x50" class="" alt="Logo" border="0" style="margin: auto;" />
            </a>
        </td>
        <td style=" text-align: right; font-size: 15px; line-height: 1; padding-bottom: 25px; padding-top: 25px; margin-top: 0px; padding-right: 35px; font-family: CUSTOM-FONT-NAME, Inter, sans-serif; margin: 0;">
            <p>
                <a href="#" target="_blank" style="text-decoration: none;white-space: nowrap;.">
                    <span style="color: #a6a6a6;text-decoration: none;">myPAGE</span>
                </a>
            </p>
        </td>
    </tr>
</table>