How to fix HTML formatting in Outlook 2016

I have a problem with my HTML code that is being generated for a web form.
It works in all programs except Outlook.

Is there a way to fix this? Because I really don't want the client to receive 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
}

      

Looks like this in Outlook enter image description here

But it should look like this: enter image description here

I really hope someone can help me with this :(

+3


source to share


2 answers


Your best bet would be to inline or all the CSS (which you did as you said) and use tables. Outlook doesn't work with DIV.

If you run this code, you will see that it is the same as in the tables. It should be noted that Outlook does not read CSS3 elements (border radius, shadows, etc.). You can still use CSS in your head, but it will be read by multiple email clients that support it.



<body style="background-color: #fafafa;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper" style="width: 100%;">
  <tbody>
    <tr>
      <td style="padding: 24px 0 24px 0;background-color: #fafafa;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
	
		<table width="90%" border="0" cellspacing="0" cellpadding="0" style="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;">
  <tbody>
    <tr>
      <td>
		
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td class="inner" style="color: #505050;font-size: 13px;padding: 24px;background-color: #ffffff;">
	
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="font-size: 30px;line-height: 34px;color: #505050;border-bottom: 1px solid #dddddd;margin-bottom: 32px;padding-bottom: 8px;background-color: #ffffff"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></td>
    </tr>
    <tr>
      <td style="color: #505050;font-size: 13px;padding: 24px 0px; background-color: #ffffff;">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!</td>
    </tr>
    <tr>
      <td style="border-top: 1px solid #dddddd;margin-top: 32px;padding-top: 8px;font-size: 12px;font-style: italic;color: #707070;background-color:#ffffff;">CENSORED</td>
    </tr>
  </tbody>
</table>
	
   
   </td>
    </tr>
  </tbody>
</table>

   
   
   </td>
    </tr>
  </tbody>
</table>
	
   
   </td>
    </tr>
  </tbody>
</table> 
</body>
      

Run codeHide result


Let me know if this works for you.

+2


source


Many email clients will extract tags <style>

from your emails, so you should line up your styles.



You can do this automatically with the CSS Inliner Tool , like the one offered by Mailchimp.

+3


source







All Articles