Table is invisible in email notification

  • ivanpogorelov · Member ·

    I have email notifications enabled on my site, HTML table in notification is invisible because color is explicitly is set to white for table[class=”main”]. So, we have the same white color for background and text color.

    Tables are shown in posts ok, but invisible in email notifications.

    I use Plane Theme.

    The blog I need help with is: (visible only to logged in users)

  • jmills39 · Staff ·

    Hi there,

    Just to clarify, is this an example post in which the table looks okay in the post, but in emails, the colors are all white, making them invisible?

    If so, I recommend testing out how it works if you convert the classic block to blocks.

    Hope that helps. Please let us know if you have any more questions and have a great day!

  • ivanpogorelov · Member ·

    Nope, the post you mentioned is not the case. I’m sorry, I missed the scenario:

    Step 0. Setup ‘Post By Email’ for user/blog

    Step 1. Send a message to auto-generated email that contains <table style=”..”><tr>….</tr></table>. The message will be fixed by WordPress and published in the blog. All styles of HTML tags and unnecessary tags are removed from the message before publishing.

    Step 2. WordPress sends email notification to users of the blog. A user checks the email, it is blank, because table borders are white and text of the table is white too

    Post by email feature works ok, but email notification contains CSS rules that cannot be fixed by setting explicitly in the email because of Step 1.

  • staff-95percentghost · Staff ·

    Hi, thank you for the clarification! In order to better check this, are you able to share the source code of the email notification as you receive it?

    If not, let us know and we can potentially test subscribing to your posts so that we can test that way.

    I am wondering if perhaps submitting the post by email using the block editor style of formatting might help too, instead of your existing formatting where the CSS is stripped out. For example, this is how a table block is created in the WordPress editor:

    <!-- wp:table {"backgroundColor":"white","textColor":"black"} -->
<figure class="wp-block-table"><table class="has-black-color has-white-background-color has-text-color has-background"><tbody><tr><td></td><td></td></tr><tr><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

    Aside from the actual table HTML, it includes a block comment <!-- wp:table --> and a figure element including a class which specifies the colour choices. For reference, this is how you can find the code view to locate this:

    WP
    WordPress Editor » Learn the Interface
    in WordPress.com Support
    3 min read
    If you’re new to editing in WordPress, this guide will help you get familiar with what you see in the editor. OverviewTop MenuSidebar MenusSettingsJetpackMore OptionsVideo TutorialContent Area Overview The WordPress Editor is made up of three main areas: The top menu The sidebar menu The content area Areas of the WordPress Editor Top Menu At the top of your screen,
  • ivanpogorelov · Member ·

    Here is HTML content of the post

    <table border="1">
  <thead>
    <tr>
      <th class="has-text-align-left" data-align="left">Column 1</th>
      <th class="has-text-align-left" data-align="left">Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="has-text-align-left" data-align="left">1</td>
      <td class="has-text-align-left" data-align="left" style="color:red;">2.00000</td>
    </tr>
    <tr>
      <td class="has-text-align-left" data-align="left">3</td>
      <td class="has-text-align-left" data-align="left">4.00000</td>
    </tr>
 </tbody>
</table>

    Please, take a look at notification email content retrieved via Outlook for desktop. The content of notification will be different in case OWA HTML. In case of using OWA as email client HTML tags are preserved and CSS classes renamed.

    Here is how the email is rendered in browser

    And this how the email is rendered in Outlook client on desktop

    As you can see the desktop application renders HTML differently then the web browser.

  • staff-totoro · Staff ·

    Hi there, can you share the link you are clicking to get to the Browser View (shown in your first screenshot) so we can take a look at that directly? Thanks for the additional info!

  • ivanpogorelov · Member ·

    Hi, here is HTML content as-is https://drive.google.com/file/d/1RhNXeNr2zA1Y-40knRMAD98w13K_EzCB/view?usp=share_link

  • staff-95percentghost · Staff ·

    Thanks for the link! Just so I understand correctly, this is the HTML for the email as it shows in Outlook, correct?

    I ran a few tests and I was replicate the white-on-white issue without using Post by Email too. I couldn’t replicate what Outlook does (which apparently is something different to how the browsers behave), but I believe I know where the issue comes from and I’ve submitted a report to our developers to review this. Unfortunately I don’t know when they’d have the chance to do so and implement a fix, but I’ve passed on as much detail as possible from your test and my own.

  • ivanpogorelov · Member ·

    That’s right, the email contains HTML I’ve shared. ‘Post by email’ works ok, but it prevents fixing the issue by setting css styles in an email.

    Can you please, let me know as soon as the issue resolved. Thanks for helping!

  • fstat · Staff ·

    Rest assured that as soon as we receive an update or a fix from our developers, we will let you know.

  • ivanpogorelov · Member ·

    Can you please remove a screenshot from comment containing our internal info?

  • staff-totoro · Staff ·

    Yep, no problem. Thanks!

  • The topic ‘Table is invisible in email notification’ is closed to new replies.