Outlook

  • Outlook “View in Browser”:

    Forces Outlook to provide a “view in browser link”

    #outlook a { padding: 0; }

  • Fix mailto in Outlook.com

    Outlook.com stops mailto from opening a new message

    Add "target=_blank"

    <a href="#" target="_blank">Link</a>

    -courtesy of Matthijs

  • Ghost column to emulate "align" in Outlook

    Outlook hates "align"; we love conditionals

    <td>
    Table X
    <!--[if mso]></td><td><![endif]-->
    Table Y
</td>

    -courtesy of Mike Ragan http://labs.actionrocket.co/makemobileemailworkin_outlook

  • Interactive Email con’t - Hover!:

    Hover effect works on these clients:

    Gmail: 

    * [lang~="x-selector"]:hover { }

    Outlook Web:

    .class:hover

    Yahoo! Web: 

    .class:hover

    -courtesy of Justin at FreshInbox

  • Image gaps in Office 365 (OWA)

    Office 365 strips display:block causing images to have massive gaps

    Wrapping an image in a <div> with a height equal to the image height will simulate a block element for clients that won't accept display:block.

    <div style="height:125px;">  
    <img src="/path/to/image.jpg" alt="Image Description" style="display:block;" width="200" height="125" />  
</div>

    In some cases the addition of font-size:0; may be required in order to remove further gaps created by certain CSS properties set on the parent element i.e. table cell such as line-height.

    Warning: Small font sizes can effect your spam score.

    For more information visit: http://www.emailonacid.com/blog/details/C13/twofixesforimagespacinginoutlookwebapp_owa

    -courtesy of James White at http://blog.jmwhite.co.uk

  • Hide content in Office 365/OWA (incl Webmail):

    Office 365 strips display, mso-hide, mso conditional

    Set font-size in containing cell to “0px”

    <td style="font-size: 0px; display: none;"></td>