How to fix the HTML Formatting in Outlook 2016

Viewed 10299

I have a Problem with my HTML Code that is generated for a Web Form.
It works in all Programs except in Outlook.

Is there some way to fix this? Because I realy dont want that a customer gets an E-Mail like this :/

MY HTML CODE:

<div class="wrapper">
<div class="container">
<div class="inner">
<div class="header sitename"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></div>
<p>Schönen guten Tag {name},<br /> Ihre Anfrage ist bei uns eingegangen. Wir bemühen uns um eine schnelle Antwort, um Ihnen weiterhelfen zu können. Sie hören bald wieder von uns!</p>
<div class="footer">CENSORED</div>
</div>
</div>
</div>

MY CSS:

/*
All classes will be replaced with style attribute.
This is done because some web mail (included google mail) strike out all style reference.

Due to this replacement the following statements will not work:
#id { color: red; }
table { border: 1px solid black; }

Related documentation: http://www.fox.ra.it/forum/enquiries-processors/11143-e-mail-notification-models.html
*/


body
{
       background-color: #fafafa;
}


.wrapper
{
    width: 100%;
    padding: 24px 0 24px 0;
    background-color: #fafafa;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container
{
    width: 90%;
    max-width: 680px;
    min-width: 280px;
    border: 1px solid #dddddd;
    background-color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(192, 192, 192, 0.9);
    margin: auto;
}

.inner
{
    color: #505050;
    font-size: 13px;
    padding: 24px;
        background-color: #ffffff;
}

.sitename
{
    font-size: 30px;
    line-height: 34px;
}

.header
{
    border-bottom: 1px solid #dddddd;
    margin-bottom: 32px;
    padding-bottom: 8px;
        background-color: #ffffff
}

.fields-list
{
    padding: 0;
    list-style-type: none;
}

.field-element
{
    list-style-type: none;
}

.field-title
{
    background-color: #eeeeee;
    padding: 4px;
    font-weight: bold;
    font-size: 13px;
    margin: 0;
}

.field-content
{
    margin: 4px 4px 16px 4px;
}

.field-table-href
{
}

.footer
{
    border-top: 1px solid #dddddd;
    margin-top: 32px;
    padding-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: #707070;
        background-color: #ffffff
}

It looks like this in Outlookenter image description here

But it should look like this: enter image description here

I realy hope that someone can help me with this :(

3 Answers

As per the outlook specific css you use below style in your html body

<!--[if mso]>
  <style type="text/css">
    /*your css here*/ ul { margin: 0px !important; }
  </style>
<![endif]-->
Related