Outlook Web App "display: none" does not work

Question

I am developing a flexible email template and I have a little problem with the Outlook Web application. I found out that it removes classes, so it makes no sense to use media queries, so I try to hide the 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 he is still a boot. Any ideas?

Answer 1

You can add

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

However, this only makes him invisible ... He is still there and occupies space

Answer 2

Blockquote

I'm not quite sure you need a straight line for the table, but try the following:

 <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, especially lines that will hide code. It will also remove any links to js or external code. So, the important thing is probably also to be ignored.

Finally, an attempt to hide the content is a huge red flag for spam filters, most likely, everything you send with this will end up in a spambox.

Answer 3

We use a combination of tables to hide and show other content. Depending on the size of the image, you can adjust the height and width 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> 

Answer 4

I had the same problem all day yesterday, I found this question here and did not find the correct answer. Then I searched the Litmus community forum. And, fortunately, I noticed a comment:

Also note mso-hide: all that if you are trying to hide the contents in a cell of a table containing nested tables, you must apply this property to any and all nested tables inside.

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

Answer 5

Wrap everything you need to hide in the div.

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

Answer 6

Use a class like this:

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