cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

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

r_tist
Enthusiast ,
Feb 13, 2025 Feb 13, 2025

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>

 

 

 

TOPICS
Code , How to , Other
557
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
replies 6 Replies 6
latest latest Jump to latest reply
Jon Fritz Community Expert
Community Expert ,
Feb 14, 2025 Feb 14, 2025

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
r_tist
Enthusiast ,
Feb 14, 2025 Feb 14, 2025
In Response To Jon Fritz

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>

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jon Fritz Community Expert
Community Expert ,
Feb 14, 2025 Feb 14, 2025
In Response To r_tist

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" >



Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
r_tist
Enthusiast ,
Feb 14, 2025 Feb 14, 2025
In Response To Jon Fritz

Any suggestions for the fix? There is no transparent hex color to adapt the white (#ffffff)

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
BenPleysier Community Expert
Community Expert ,
Feb 14, 2025 Feb 14, 2025
In Response To r_tist

Take out all white background, these are the default values and remove the 15px border as in 

<body>
    <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" 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">
            <tr>
              <td>
                <a href="#">
                <img src="logo.png" width="238" alt="logo" align="right">
                </a>
              </td>
            </tr>
          </table>
          <table id="body-content" align="center" border="0" 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">
            <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>
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Jon Fritz Community Expert
Community Expert ,
Feb 18, 2025 Feb 18, 2025
LATEST
In Response To r_tist
quote

Any suggestions for the fix? There is no transparent hex color to adapt the white (#ffffff)


By @r_tist



Is there a reason you're using border instead of padding and/or margin settings in your CSS?

Both alternatives would be transparent by default.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices