CODEWITHSUNDEEP
c#outlookhtml-email
Richard B. Sorensen
Richard B. Sorensen

Reputation: 111

Send generated html email to Outlook clients without getting it reformatted

I am attempting to send html-formatted emails generated in a C# web app to Outlook clients. These messages include html tables and images.

The tables and the images come through, but Outlook changes the formatting of the tables and screws them up (it adds additional line breaks and other elements).

How can I force Outlook clients to retain the original html formatting?

Here is the html content I am trying to include:

<div style='font-family: arial;'>
  <table style='border-collapse:collapse;' cellspacing='0' cellpadding='0' border='0'>
    <tr style='height: 180px;'>
      <td style='width:1.65in; border:none; border-right:solid windowtext 1.0pt; padding:0in 5.4pt 0in 5.4pt;' valign='top'>
        <p style='margin: 2px; font-size:12.0pt; color:#002060; text-align:center' align='center'><b>%name%</b></p>
        <p style='margin: 2px; font-size:11.0pt; color:#002060; text-align:center' align='center'>%title%</p>
        <p style='margin: 20px;'> </p>
        <p><img src='cid:logo' alt='TUV USA Logo' style='width: 118; height: 103;'></p>
      </td>
      <td style='width:148.85pt; padding:0in 5.4pt 0in 5.4pt;' valign='top'>
        <p><b><span style='font-size:12.0pt; color:#002060'>TUV USA, Inc.</span></b></p>
        <p> </p>
        <p style='margin: 2px; font-size:8.0pt; color:#1F497D'>215 Main Street</p>
        <p style='margin: 2px; font-size:8.0pt; color:#1F497D'>Salem, NH 03079</p>
        <p style='margin: 2px; font-size:8.0pt; color:#1F497D'>United States of America</p>
        <p> </p>
        <p style='font-size:8.0pt; color:#1F497D'>Phone: 603-870-8023</p>
        <p> </p>
        <p><a href='mailto:%emailaddress%' target='_blank'><span style='font-size:8.0pt; color:#1F4E79; text-decoration:none'>%emailaddress%</span></a></p>
        <p><a href='http://www.tuv-usa.com/' target='_blank'><span style='font-size:8.0pt; color:#1F497D; text-decoration:none'>www.tuv-usa.com</span></a></p>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 2472

Answers (2)

r41n
r41n

Reputation: 938

Disclaimer: The following was tested with Outlook 2016 & Thunderbird

CSS Formatting

EDIT: Fixed the reset code below, please try it.

Do you provide any styling information in your HTML (CSS?). Try to reset your table/div with something like this:

style="margin:0;padding:0;border: 0;"

I have a very similar scenario, and I don't have the issue you are describing. The only thing I noticed is that Outlook ignores some more advanced CSS style information, like shadows. Every browser has its standard of displaying content (different margin, padding, ...). You can reset these settings by forcing them to 0 with the code above.

In case of a <table> there are also other style settings that might influence the look of it when viewed in different browsers/mail-clients, the cell and column spacing for example.

Code

Make sure that in case of MailMessage you are setting the IsBodyHtml property to true. Else HTML content might get displayed as text.

Example

The following is the HTML code I use in my case:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>##[TITLE]##</title>
    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            vertical-align: baseline;
        }

        p {
            margin: 4px;
        }

        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
            display: block;
        }

        body {
            line-height: 1;
        }

        ol, ul {
            list-style: none;
        }

        blockquote, q {
            quotes: none;
        }

            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .ellipsis {
            height: 12px;
            padding-left: 2px;
            padding-right: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // IE 6+, FF 7+, Op 11+, Saf 1.3+, Chr 1+ -o-text-overflow: ellipsis;
            // for Opera 9 & 10;
        }

        tr:nth-child(odd) {
            background-color: lightcyan;
        }
    </style>
</head>

<body style="border:1px;border-color:black;box-shadow: 1px 1px 2px 1px #888888;margin:12px">
    <header>
        <div style="padding:12px;padding-top:8px">
            <h5>##[TITLE]##</h5>
            <span style="font-size:11px">Started on ##[START]## - Ended on ##[END]## (##[DURATION]##)</span>
        </div>
    </header>

    <main>
        <div style="margin-left:12px;margin-right:12px;font-size:12px;font-family:Verdana">
            <p>Products: ##[PRODUCT_COUNT]##</p>
            <p style="font-size:11px">Articles: ##[ARTICLE_COUNT]##</p>
        </div>
        <div style="margin-top:12px;margin-left:12px;margin-right:12px;font-size:12px;font-family:Verdana">
            <p style="font-size:11px;color:darkred">Failures: ##[FAILURE_COUNT]##</p>
            <table style="font-family:Tahoma;font-size:10px;margin-left:12px;margin-right:100px;width:97%;table-layout:fixed">
                ##[FAILURE_ROWS]##
            </table>
        </div>
        <div style="margin-top:12px;margin-left:12px;margin-right:12px;font-size:12px;font-family:Verdana">
            <p style="font-size:11px;color:orange">Warnings: ##[WARNING_COUNT]##</p>
            <table style="font-family:Tahoma;font-size:10px;margin-left:12px;margin-right:100px;width:97%;table-layout:fixed">
                ##[WARNING_ROWS]##
            </table>
        </div>
    </main>

    <footer>
        <div style="padding:12px;padding-bottom:8px;color:gray">
            <h6>Check the attachment of this e-mail for more details.</h6>
        </div>
    </footer>
</body>

</html>

Placeholders like ##[TITLE]## will be replaced by string.Replace with the proper value during generation of the email body. This is particularly important in case of ##[FAILURE_ROWS]## and ##[WARNING_ROWS]## which are replaced by several of the following strings:

string row = "<tr>" +
            "<td class=\"ellipsis\" style=\"width:95px;color:gray\">" + time + "</td>" +
            "<td class=\"ellipsis\" style=\"width:30%\">" + Entry.Value1 + "</td>" +
            "<td class=\"ellipsis\" style=\"width:80px;color:gray\">" + Entry.Value2 + "</td>" +
            "<td class=\"ellipsis\" style=\"width:30%;color:gray\">" + Entry.Value3 + "</td>" +
            "<td style=\"width:70%\">" +
                "<div class=\"ellipsis\" style=\"max-width:90%\">" +
                    Entry.Message + 
                "</div>" +
            "</td>" +
        "</tr>";

Once all placeholders are replaced with generated and properly formatted HTML code there should be no issues whatsoever.

HTH

Upvotes: 1

Singh Kailash
Singh Kailash

Reputation: 674

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\"><html><head><title></title><META http-equiv=Content-Type content=\"text/html; charset=iso-8859-1\"></head>
<body>
  --mail Content....
  </body>

</html>

Upvotes: 1

Related Questions