Monday, August 18, 2014

HTML Alert Formatting in Microsoft Outlook

While implementing the HTML alert i have faced an issue where the outlook client (2003/2007/2010) are not shown in the correct format. If you can use the following embedded style class into you alert then it will work fine. I have used the different style will be used for the outlook client and the other web client. 

Note : Embedded style dose not work with the GMail client.


<style type="text/css">
    <!--[if mso]>
    .e-dumm
        {color:#0C74C1}
    a.e-link
        {color:#0C74C1}
    .e-heading
        {font-size:20px;
        color:#0C74C1;
        margin:5px 0}
    .e-subheading
        {font-size:16px;
        color:#A9A9A9;
        margin:0 0 10px 0}
    .e-signature
        {margin-top:25px;
             font-family:Arial,sans-serif;
         font-size:14px;
             line-height: 5px;
         color:#777777;
            }
    .e-signature p
        {
              margin:0px;
            }
    .e-footer
        {margin-top:50px;
            }
    .e-copyright
        {margin-top:5px;
             font-family:Arial,sans-serif;
         font-size:11px;
         color:#777777;
            }
    .e-copyright p{
             margin:0px;
            }
    .e-b-body{margin:10px 0px;
            font-family:Arial,sans-serif;
        font-size:14px;
        color:#777777}
    <![endif]-->
    <!--[if !mso]>
    .e-dumm
        {color:#0C74C1}
    a.e-link
        {color:#0C74C1}
    .e-heading
        {font-size:20px;
        color:#0C74C1;
        margin:5px 0}
    .e-subheading
        {font-size:16px;
        color:#A9A9A9;
        margin:0 0 10px 0}
    .e-signature
        {margin-top:25px;
             font-family:Arial,sans-serif;
         font-size:14px;
             line-height:5px;
         color:#777777;
            }
    .e-footer
        {margin-top:50px;
            }
    .e-copyright
        {margin-top:5px;
             font-family:Arial,sans-serif;
         font-size:11px;
             line-height:5px;
         color:#777777;
            }
    .e-b-body
        {margin:10px 0px;
        font-family:Arial,sans-serif !important;
        font-size:14px !important;
        color:#777777 !important}
    <![endif]-->
</style>

No comments:

Post a Comment