0

I've created a style to make it easy to format code snippets in emails. When I apply the style, it looks like this in the new email window:

before

However, when the email is received, it adds some weird whitespace padding between the border and the shading:

after

Is there any way to fix this from within Outlook?

Edit: Adding the HTML source of the email as requested in the comments:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
    <head>
        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
        <meta name=Generator content="Microsoft Word 15 (filtered medium)">
        <style>
            <!--
            /* Font Definitions */
            @font-face
                {font-family:Calibri;
                panose-1:2 15 5 2 2 2 4 3 2 4;}
            @font-face
                {font-family:Consolas;
                panose-1:2 11 6 9 2 2 4 3 2 4;}
            /* Style Definitions */
            p.MsoNormal, li.MsoNormal, div.MsoNormal
                {margin:0in;
                margin-bottom:.0001pt;
                font-size:11.0pt;
                font-family:"Calibri",sans-serif;}
            a:link, span.MsoHyperlink
                {mso-style-priority:99;
                color:#0563C1;
                text-decoration:underline;}
            a:visited, span.MsoHyperlinkFollowed
                {mso-style-priority:99;
                color:#954F72;
                text-decoration:underline;}
            p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
                {mso-style-priority:34;
                margin-top:0in;
                margin-right:0in;
                margin-bottom:0in;
                margin-left:.5in;
                margin-bottom:.0001pt;
                font-size:11.0pt;
                font-family:"Calibri",sans-serif;}
            p.Code, li.Code, div.Code
                {mso-style-name:Code;
                mso-style-link:"Code Char";
                margin-top:12.0pt;
                margin-right:0in;
                margin-bottom:12.0pt;
                margin-left:.2in;
                background:#EFF0F1;
                border:none;
                padding:0in;
                font-size:10.0pt;
                font-family:Consolas;
                color:#242729;}
            span.CodeChar
                {mso-style-name:"Code Char";
                mso-style-link:Code;
                font-family:Consolas;
                color:#242729;
                background:#EFF0F1;}
            span.EmailStyle20
                {mso-style-type:personal-compose;
                font-family:"Calibri",sans-serif;
                color:windowtext;}
            .MsoChpDefault
                {mso-style-type:export-only;
                font-size:10.0pt;
                font-family:"Calibri",sans-serif;}
            @page WordSection1
                {size:8.5in 11.0in;
                margin:1.0in 1.0in 1.0in 1.0in;}
            div.WordSection1
                {page:WordSection1;}
            -->
        </style>
    </head>
    <body lang=EN-US link="#0563C1" vlink="#954F72">
        <div class=WordSection1>
            <p class=MsoNormal>Good morning,<o:p/>
            </p>
            <p class=MsoNormal>
                <o:p>&nbsp;</o:p>
            </p>
            <p class=MsoNormal>Test text.<o:p/>
            </p>
            <div style='mso-element:para-border-div;border:solid #AEAAAA 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt;background:#EFF0F1;margin-left:.2in;margin-right:0in'>
                <p class=Code style='margin-left:0in;background:#EFF0F1'>var test = new Test();<o:p/>
                </p>
            </div>
            <p class=MsoNormal>More text.<o:p/>
            </p>
        </div>
    </body>
</html>
  • You will need to supply the html for your style too if you want us to be able to figure it out. – LPChip Jul 5 '18 at 15:54
  • @LPChip I've edited my comment to include the HTML source for the email. – Lews Therin Jul 5 '18 at 16:15
1

Your code below uses ' where it should use ". Outlook does understand the ' but its not html complient.

        <div style='mso-element:para-border-div;border:solid #AEAAAA 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt;background:#EFF0F1;margin-left:.2in;margin-right:0in'>
            <p class=Code style='margin-left:0in;background:#EFF0F1'>var test = new Test();<o:p/>
            </p>
        </div>

Changing this to <div style=" .... " and <p class=Code style=" ... " should solve it.

| improve this answer | |
  • This is interesting because I made the Style in outlook's UI. How can I get to the HTML for the style itself? I just posted the source of the email after I had sent it... – Lews Therin Jul 5 '18 at 16:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.