Outlook Web App "display :none" not working

Question

I am designing a responsive email template and i have a slight problem on Outlook Web app. I found out that it removes classes so there is no point in using media queries so i try to hide a tr element like this :

<tr style="mso-hide:all;
           display:none;
           height:0;
           width:0px;
           max-height:0px;
           overflow:hidden;
           line-height:0px;
           float:left;">

But it still shoes up. Any Ideas?

Do you mean office 365 as outlook web app or is it outlook.com? — Arindam Nayak, Sep 27 '14 at 18:50
Does the `` you are trying to hide contain child table(s)? If so, try applying the same hiding style to the child table(s). — Pebbl, Sep 27 '14 at 19:03

score 1 · Answer 1 · answered Sep 22 '14 at 13:02

1

You can add the

 <tr style="visibility: hidden"></tr>

However, this only makes it not visible... It is still there and taking up space

answered Sep 22 '14 at 13:02

Wijnand M

372
1
3
12

score 1 · Answer 2 · edited Dec 01 '17 at 09:54

1

Use such class:

.hide {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

edited Dec 01 '17 at 09:54

Hille

2,123
22
39

answered Dec 01 '17 at 09:01

Igor Khripunov

11
1

score 0 · Answer 3 · answered Sep 27 '14 at 18:44

Blockquote

I'm not entirely sure way you need a hidden table row, but try this:

<tr style="mso-hide:all;
       display:none!important;
       height:0;
       width:0px;
       max-height:0px;
       overflow:hidden;
       line-height:0px;
       float:left;">

This may not work as email clients remove some of the CSS, specially lines that will hide code. It will also remove any links to js or external code. So !important will probably be ignored as well.

Lastly trying to hide content is a huge red flag for spam filters, likely whatever you send with this will end up in the spambox.

score 0 · Answer 4 · answered Jun 10 '15 at 16:08

We use a combination of tables to hide and show different content. Depending on the size of the image you can adjust the height and width of the td.

Styles:

td.inner  { display:none; }
table.promo_1_pic_1 { float: none; width:100%; height:95px; }
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_2_pic_2 { float: none; width:100%; height:95px; }
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_3_pic_3 { float: none; width:100%; height:109px; }
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_4_pic_4 { float: none; width:100%; height:109px; }
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; }

HTML:

<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">        
              <!-- promo 1 content -->
                <table class="promo_1_pic_1"><tr><td></td></tr></table>
                <table class="promo_2_pic_2"><tr><td></td></tr></table>
                  <table class="promotion">
                      <tr>
                          <td class="inner"><a href="#"><img src="test.jpg"  alt=""/></a>
                          </td>
                          <td class="inner"><a href="#"><img src="test.jpg"  alt=""/></a>
                          </td>
                      </tr>
                  </table>
             </td>
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">        
              <!-- promo 1 content -->
                <h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3>
                <table class="promo_3_pic_3"><tr><td></td></tr></table>
                <table class="promo_4_pic_4"><tr><td></td></tr></table>
                  <table class="promotion">
                      <tr>
                          <td class="inner"><a href="#"><img src="test.jpg"></a>
                          </td>
                          <td class="inner"><a href="#"><img src="test.jpg"></a>
                          </td>
                      </tr>
                  </table>
         </td>

score 0 · Answer 5 · answered Jul 23 '15 at 15:04

I had the same problem all day yesterday, I found this question here and seems no correct answer. Then I searched in Litmus community forum. And fortunately saw a comment saying:

Also note with mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.

So I added mso-hide:all to all child tables, and it worked!

score 0 · Answer 6 · answered Sep 08 '17 at 21:23

0

Wrap whatever you need to hide in a div.

div {
    width: 0;
    height: 0;
    overflow: hidden;
}

answered Sep 08 '17 at 21:23

Lana Phillips

1

score 0 · Answer 7 · answered Apr 30 '18 at 10:27

To keep this question up to date, OWA does accept classes now, and can be targeted by adding [owa] to the start of the class list in css.

[owa] .hide,
.hide {
    display: none!important;
    mso-hide: all;
    width: 0;
    min-width: 0;
    max-width: 0;
    height:0;
    min-height: 0;          
    max-height: 0;
    overflow: hidden;
    font-size: 0px;
    line-height: 0px;
}

With this adding .hide to the element you want to hide, will hide it in all popular email clients, if you want to hide from just outlook (excl OWA), then I'd suggest using conditional code. The following table will be hidden in all email clients. Although it will appear when the email is forwarded from certain email clients.

<!--[if !mso]><!-- -->
    <table class="hide">
        Hide me
    </table>
<!--<![endif]-->

Outlook Web App "display :none" not working

7 Answers7

Linked