Support » Plugin: MailPoet - Newsletters, Email Marketing, and Automation » Styling issue on email with columns in Edge browser

  • Resolved RJ

    (@rolandjosuran)


    When designing a newsletter using the MailPoet Newsletter Editor, columns layout works well to create and view emails in most browsers and mail programs. By rendering the created emails in MS Edge (latest version 89.0.774.63), the blocks are not side by side, but irregularly stacked.

    The basic HTML of the created email is something like this (I have removed all unnecessary elements):

    <!DOCTYPE html>
    <html lang="en" style="margin:0;padding:0">
    <head>
    </head>
    <body >
        <table class="mailpoet_content-wrapper" border="0" width="660" cellpadding="0" cellspacing="0" style="border-collapse:collapse;background-color:#ffffff;border-spacing:0;max-width:660px;width:100%">
            <tbody>
                <tr>
                    <td align="center" style="border-collapse:collapse;font-size:0">
                        <div style="display:inline-block; max-width:330px; width:100%;">
                            <table width="330" style="border-collapse:collapse;width:100%;max-width:330px;border-spacing:0;">
                                <tbody>
                                    <tr>
                                        <td style="border-collapse:collapse;font-size:16px;">
                                            Left column
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="display:inline-block; max-width:330px; width:100%;">
                            <table width="330" style="border-collapse:collapse;width:100%;max-width:330px;border-spacing:0;">
                                <tbody>
                                    <tr>
                                        <td style="border-collapse:collapse;font-size:16px;">
                                            Right column
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    
    </body>
    </html>

    The inner tables have a with of 330 px each and the outer table 660px. Strangely enough, the total width of the both inner tables (2 x 330 px) is in sum more than 660 px (660.23 px). Therefore, the inner tables are not side by side but stacked.

    Probably, this is an issue with edge. How can this be solved? To be honest, I have no idea where to start.

    • This topic was modified 2 years, 12 months ago by RJ.
Viewing 1 replies (of 1 total)
  • Thread Starter RJ

    (@rolandjosuran)

    GREAT! Just realised that MS has fixed that in the newest build of Edge (Version 89.0.774.68).

Viewing 1 replies (of 1 total)
  • The topic ‘Styling issue on email with columns in Edge browser’ is closed to new replies.