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

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.