Html - <div> color fill issue in Outlook desktop

MaryOverflow
June 30, 2023
170 views
0 votes
2 Answers

I need to make .ftl template for email notification. Users would see it in Outlook desktop version. Template I made works looks fine everywhere, except Outlook desktop.

How I want it to look: enter image description here

How it actually looks: enter image description here

There is color fill issue I have no idea how to fix ((

HTML :

<table border="0" cellpadding="0" cellspacing="0" style="color: #464547; font: normal normal 14px Arial, Helvetica, sans-serif; margin-left: 36px; margin-right: 36px;">
    <tr>
        <td style="vertical-align:top;">
           <table width="56" cellspacing="0" style="width:56px; text-align:center;table-layout:fixed; overflow: hidden; ">
                <tr>
                        <td>
                              <div style="border: 1px solid #6C6F80;width: 100%; overflow: hidden;text-align:center;border-radius: 2px;">
                                     <div style="background:#E9564E; line-height: 14px; padding: 4px;font: normal 700 12px Arial, Helvetica, sans-serif;color:#FAFAFC; text-transform: uppercase;">
                                          ${month}
                                     </div>

                                   <div style="background:#EBEDF5;padding:3px; font: normal 24px Arial, Helvetica, sans-serif;line-height: 28px;color:#303240; border-top: 1px solid #6C6F80;">
                                          ${date}
                                   </div>
                              </div>
                        </td>
                </tr>
            </table>

I tried to fix it with instead of , but it didnt help

Answers

try setting the table to have no border and no outline

<table border="0" cellpadding="0" cellspacing="0" style="color: #464547; font: normal normal 14px Arial, Helvetica, sans-serif; margin-left: 36px; margin-right: 36px;border:none;outline:none;">
    <tr>
        <td style="vertical-align:top;">
           <table width="56" cellspacing="0" style="width:56px; text-align:center;table-layout:fixed; overflow: hidden;border:none;outline:none;">
                <tr>
                        <td>
                              <div style="border: 1px solid #6C6F80;width: 100%; overflow: hidden;text-align:center;border-radius: 2px;">
                                     <div style="background:#E9564E; line-height: 14px; padding: 4px;font: normal 700 12px Arial, Helvetica, sans-serif;color:#FAFAFC; text-transform: uppercase;">
                                          ${month}
                                     </div>

                                   <div style="background:#EBEDF5;padding:3px; font: normal 24px Arial, Helvetica, sans-serif;line-height: 28px;color:#303240; border-top: 1px solid #6C6F80;">
                                          ${date}
                                   </div>
                              </div>
                        </td>
                </tr>
            </table>

The issues are fixed for Outlook. I checked it in Outlook 2013 and it is looking exactly what it is in the browser. Here are the changes I have made:

Removed the border from the div and set it to the container table cell (td)
Set "bgcolor="#EBEDF5"" to the table cell containing the divs so that it can cover the background color issue due to the 3px padding of the date div.

And regarding the border-radius: I think Outlook doesn’t support border-radius yet so you can remove it as it is currently useless.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0" style="color: #464547; font: normal normal 14px Arial, Helvetica, sans-serif; margin-left: 36px; margin-right: 36px;">
        <tr>
            <td style="vertical-align:top;">
               <table width="56" cellspacing="0" style="width:56px; text-align:center;table-layout:fixed; overflow: hidden;">
                    <tr>
                        <td style="border: 1px solid #6C6F80; padding: 0;" bgcolor="#EBEDF5">
                            <div style="width: 100%; text-align:center;border-radius: 2px; overflow: hidden;">
                                <div style="background:#E9564E; line-height: 14px; padding: 4px;font: normal 700 12px Arial, Helvetica, sans-serif;color:#FAFAFC; text-transform: uppercase;">
                                    JUL<!-- ${month} -->
                                </div>

                                <div style="background:#EBEDF5; padding:3px; font: normal 24px Arial, Helvetica, sans-serif;line-height: 28px;color:#303240; border-top: 1px solid #6C6F80;">
                                    11<!-- ${date} -->
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – <div> color fill issue in Outlook desktop

Answers