display:none doesn't work on Outlook 2007

Question

I want to send an e-mail from our system to customers, where some tags should be hidden to them. I\'ve set the following CSS:

.hidden { display: none; }


        

Answer 1

I did some quick testing, and found that Outlook (2000, 2003, 2007, 2010, 2013 and Outlook.com) supported several variations of display: none; as expected. On the other hand, Gmail in the browser and on Android failed miserably.

I tested the following:

<table>
  <tr>
    <td style="display: none;">01</td>
    <td style="display: none !important;">02</td>
    <td style="display: none; display: none !important;">03</td>
    <td id="displayNone">04</td> 
    <td id="displayNoneImportant">05</td>
    <td id="displayNoneDisplayNoneImportant">06</td>
  </tr>
</table>

CSS inline, in the HEAD and in the BODY

Where there are IDs, I tested the follow CSS in the HEAD of one email and in the BODY of another email.

<style>
    #displayNone {
        display: none;
    }
    #displayNoneImportant {
        display: none !important;
    }
    #displayNoneDisplayNoneImportant {
        display: none;
        display: none !important;
    }
</style>

RESULTS: CSS Inline and in the BODY

1. Outlook (all) passed; Outlook.com Android failed, Gmail (all) failed
2. Outlook (all) passed; Gmail (all) failed
3. Outlook (all) passed; Gmail (all) failed
4. Outlook (all) passed; Gmail (all) failed
5. Outlook 2007, 2010 & 2013 failed; Gmail (all) failed
6. Outlook (all) passed; Gmail (all) failed

Outlook (all) = 2000, 2003, 2007, 2010, 2013, Android Outlook, Outlook.com (IE, Fx, Chrome)

Gmail (all) = Gmail in IE, Fx, Chrome and in Android

RESULTS: CSS Inline and in the HEAD

1. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
2. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
3. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
4. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed
5. Outlook 2007, 2010 & 2013 failed; Outlook.com Android failed; Gmail (all) failed
6. Outlook (all) passed; Outlook.com Android failed; Gmail (all) failed

LONG STORY SHORT

Outlook 2000+ supports display: none; fairly well. Gmail does not. It became difficult to discern what was failing or working in Gmail due to how much it failed. The screens even became cropped in certain situations.

I'll retest later and post screenshots if I can — right now my testing set up is taking too long to save out screen shots of each scenario and reader.

Answer 2

A bit too late but you can try for example:

<span style="font-size: 0px; color: White; display: none">Yada Yada</span>

Answer 3

This solution was tested on Outlook 2007 and works.

< td style="line-height:0; border:0; font-size:0px" >

Answer 4

You can try to wrap around

     <!--[if !IE]><!-->


     <!--<![endif]-->

Answer 5

Late, but, as general guidelines for e-mails:

1) Always use tables

2) Don't use following tags: div, p, i, or b (use em for italic, and strong for bolding.

3) Don't set font properties on body tag, or even on parent elements like table tags; you must set the font properties on every area where there is text displayed; however, you CAN set it on a tr tag instead of on each td tag. Just remember to do it on EVERY tr that has text displayed in its subsequent td's, unless the text is wrapped inside another or several other elements/tags.

4) Put "mso-hide:all;" as an INLINE style on parent element as well as the child elements. You can also try setting width and height to 1px (setting to 0 rarely works for many clients) and then set visibility to "hidden" and just in case, set opacity to ".0" or "0", just to cover your bases.

5) Do not use non-breaking space elements in empty td's where you're using them to create padding (which is better than using CSS padding in most cases). The nbsp element will force heights to be incapable of being less than a certain size, which is annoying when you're trying to create, say, a 2px vertacle spacing.

5) Using the "if lt mso9" trick works well, but avoid using it to "hide" things in desktop view & displaying them on mobile. It's less elegant and it also creates bloated code. Use the above method(s) instead if you can, if for nothing else, for future version compatibilty's sake.

Answer 6

how about remove the tags with "display:none;" with code. i use string.split the html string String.split("<td ") and StringBuilder sb. then if-else. if the split string does not .contains("display:none;") then append to stringbuilder sb.append(String). make sure to put back the "<td " , so sb.append("<td " + String). u might want to exclude several split string, such as null split string,or which contains tags("<h1 ","<table " ).