HTML Email Blast Code - Dark Mode in Outlook Shows Areas of White

Forum|Forum|11 months ago
February 13, 2025
1 reply
646 views

Hi,

This is a partial snippet of code from an html email. The issue is with Outlook dark mode. - White areas appear above the logo, slightly below and to the right in the area of the right margin.
I am unsure how to resolve inline within this code.

Please advise. Thanks.

<body bgcolor="#ffffff" style="background-color:#ffffff;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="500">

      <tr>
          <td align="left" valign="top"><br />
      <center><img src="https://graphic.gif" width="300" align="center"></center></td>
      </tr>
      
      </table>

		<table id="outer-table"  cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
			<tr>
				<td align="center" style="padding-top:20px;padding-bottom:20px;">
					<span style="color:#444; font-size: 14px; font-family: 'Calibri', Arial, sans-serif;"><em>Headline</em></span>
				</td>
			</tr>
			<tr>
				<td style="border-top: solid 1px #bae6ff; border-bottom: solid 20px #ffffff;">&nbsp;</td>
			</tr>
      <tr>
        <td>
          <table width="100%" border="0" align="center" cellpadding="3" cellspacing="3" bgcolor="#ffffff">
            <tr>
              <td style="border-right: solid 15px #ffffff; border-bottom: solid 2px #ffffff" >
                <a href="#">
                <img src="https://logo.png" width="238" alt="logo" align="right">
                </a>
              </td>
            </tr>
          </table>

Jon Fritz

Community Expert

I think you're confusing the old girl with the multiple calls for a white background. The default background is white, there shouldn't be a reason to specify it, unless something else in your code, that you're not showing, us makes it necessary.

What happens when you remove bgcolor="#ffffff" style="background-color:#ffffff;" from everywhere?

R

r_tistAuthor

Inspiring

Here is a slimmed down skeleton of the code within the <body>. The glitches of 'white' display to the right of the logo, above the logo and a slim line of white below the logo in dark mode, in Outlook.
It would be fantastic if I could sort that out. I did find a free online tester for dark mode:
https://proofjump.com/dark-mode-simulator/

<body bgcolor="#ffffff" style="background-color:#ffffff;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="500">

      <tr>
          <td align="left" valign="top"><br />
      <center><img src="https://sa.gif" width="300" align="center"></center></td>
      </tr>
      
      </table>
  
		<table id="outer-table"  cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center">
			<tr>
				<td align="center" style="padding-top:20px;padding-bottom:20px;">
					<span style="color:#444; font-size: 14px; font-family: 'Calibri', Arial, sans-serif;"><em>Pre-Header</em></span>
				</td>
			</tr>
			<tr>
				<td style="border-top: solid 1px #bae6ff; border-bottom: solid 20px #ffffff;">&nbsp;</td>
			</tr>
      <tr>
        <td>
          <table width="100%" border="0" align="center" cellpadding="3" cellspacing="3" bgcolor="#ffffff">
            <tr>
              <td style="border-right: solid 15px #ffffff; border-bottom: solid 2px #ffffff" >
                <a href="#">
                <img src="logo.png" width="238" alt="logo" align="right">
                </a>
              </td>
            </tr>
          </table>
          <table id="body-content" align="center" border="0" bgcolor="#ffffff" cellpadding="20">
            <tbody>
              <tr>
                <td align="left">
                  <strong>
                    <p align="left" style="color: #329044; font-size: 32px; font-family: 'Calibri', Arial, sans-serif; letter-spacing: -.5px; font-weight: bold;">Headline</p>
                  </strong>
                  <p style="color:#444; font-size: 18px; font-family: 'Calibri', Arial, sans-serif;">Body copy.</p>
                </td>
              </tr>
              
              <tr>
                <td align="center" style="padding: 0; margin: 0;">
                  <p style="color: #002f87; font-size: 22px; font-family: 'Calibri', Arial, sans-serif; font-weight: bold; margin: 0; padding: 12px;"><a style="color:#457cbf;" target="_blank" href="#">CTA</a></p>
                </td>
              </tr>
            </tbody>
          </table>
          <table id="footer-table" align="center" border="0" bgcolor="#ffffff">
            <tr>
              <td align="center" style="border-top: solid 1px #bae6ff">
                <p style="font-family: 'Calibri', Arial, sans-serif;">Footer Text
                </p>
                <table cellspacing="7">
                  
                </table>
                <p style="font-family: 'Calibri', Arial, sans-serif;"><span style="color: #002f87; font-size: 14px">&copy; Copyright. All rights reserved.</span><br>
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
		
		</table>
	</body>

Jon Fritz

Community Expert

The issue in the test site is coming from the border settings here...

<td style="border-right: solid 15px #ffffff; border-bottom: solid 2px #ffffff" >

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded