"invisibleIntroduction" problem on Outlook

[Davide Bellini]

Hi,
I have used "invisibleIntroduction" in my email template but this section is hidden in Apple Mail but not in Outlook ( I've tried with Outlook 2010 ).

HTML:

<!--
    The "invisibleIntroduction" is the text used for short preview
    of the email before the user opens it (50 characters max). Sometimes,
    you do not want to show this message depending on your design but this
    text is highly recommended.

    You do not have to worry if it is hidden, the next <td> will automatically
    center and apply to the width 100% and also shrink to 50% if the first <td>
    is visible.
-->
<td align="left" valign="middle" id="invisibleIntroduction" class="flexibleContainerBox" style="display:none !important;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
        <tr>
            <td align="left" class="textContent">
                <div style="font-family:Helvetica,Arial,sans-serif;font-size:13px;color:#828282;text-align:center;line-height:120%;">
                    This is an introduction text and must be hidden
                </div>
            </td>
        </tr>
    </table>
</td>
<td align="right" valign="middle" class="flexibleContainerBox">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
        <tr>
            <td align="left" class="textContent">

            </td>
        </tr>
    </table>
</td>

Screenshots:

Apple Mail

Outlook 2010

[Kay Spiegel]

I had the same experience yesterday testing a newsletter on litmus. I changed the classes and ids to show a tiny text with the same font color as the background.

Another thing is to have this text editable in certain tools. If you set the corresponding tags for making a section editable this e.g. doesn't work on templates used in cleverreach.de.

[Davide Bellini]

Temporary I solved with this:

...
<div style="font-family:Helvetica,Arial,sans-serif;font-size:0;line-height:0;color:#E1E1E1;">
    This is an introduction text and must be hidden
</div>
...

But I think this need a solution Out Of The Box :)

[Charlesmudy]

Guys, thanks. I'll look into this and add it to the list of fixes I'm pushing in couple of days

[Davide Bellini]

👍

[Kay Spiegel]

@charlesmudy thanks and great template by the way 👍

[Davide Bellini]

Any news about that?

[fragdieb]

Using mso-hide:all works for me.

<td align="left" valign="middle" id="invisibleIntroduction" class="flexibleContainerBox" style="display:none !important; mso-hide:all;">
                                                                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
                                                                            <tr>
                                                                                <td align="left" class="textContent">
                                                                                    <div style="font-size:13px;color:#828282;text-align:center;line-height:0; overflow:hidden; mso-hide:all;" mc:edit="vorschau_text">
                                                                                        Themen: Impact Investing, Wertentwicklung Gold-Anlagen, Sustainable Investments im LoremIpsum-Bereich.
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>

[Charlesmudy]

@billmn does @fragdieb's solution works for you?

[Davide Bellini]

I haven't tested it yet