search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.76k stars 1.09k forks source link

Hero Sidebar Template not working in iOS 7 iPhone Mail App #23

Closed Defcon0 closed 10 years ago

Defcon0 commented 10 years ago

Hello,

the layout is broken in the latest iOS 7 (7.0.4) Mail App on the iPhone (I have the iPhone 5).

In the GMail Mail App it works just great. Even the media queries are working :)

foto

If it should be necessary, here's the code I gave in to the inliner on your website (I just inserted the content of ink.css from the master branch into the style section of the template):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width"/>
  <style>
    /**********************************************
* Ink v1.0.3 - Copyright 2013 ZURB Inc        *
**********************************************/

/* Client-specific Styles & Reset */

#outlook a { 
  padding:0; 
} 

body{ 
  width:100% !important; 
  -webkit-text-size-adjust:100%; 
  -ms-text-size-adjust:100%; 
  margin:0; 
  padding:0;
}

.ExternalClass { 
  width:100%;
} 

.ExternalClass, 
.ExternalClass p, 
.ExternalClass span, 
.ExternalClass font, 
.ExternalClass td, 
.ExternalClass div { 
  line-height: 100%; 
} 

#backgroundTable { 
  margin:0; 
  padding:0; 
  width:100% !important; 
  line-height: 100% !important; 
}

img { 
  outline:none; 
  text-decoration:none; 
  -ms-interpolation-mode: bicubic;
  width: auto;
  max-width: 100%; 
  float: left; 
  clear: both; 
  display: block;
}

center {
  width: 100%;
  min-width: 580px;
}

a img { 
  border: none;
}

p {
  margin: 0 0 0 10px;
}

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

td { 
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  border-collapse: collapse !important; 
}

table, tr, td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

hr {
  color: #d9d9d9; 
  background-color: #d9d9d9; 
  height: 1px; 
  border: none;
}

/* Responsive Grid */

table.body {
  height: 100%;
  width: 100%;
}

table.container {
  width: 580px;
  margin: 0 auto;
  text-align: inherit;
}

table.row { 
  padding: 0px; 
  width: 100%;
  position: relative;
}

table.container table.row {
  display: block;
}

td.wrapper {
  padding: 10px 20px 0px 0px;
  position: relative;
}

table.columns,
table.column {
  margin: 0 auto;
}

table.columns td,
table.column td {
  padding: 0px 0px 10px; 
}

table.columns td.sub-columns,
table.column td.sub-columns,
table.columns td.sub-column,
table.column td.sub-column {
  padding-right: 10px;
}

table.row td.last,
table.container td.last {
  padding-right: 0px;
}

table.one { width: 30px; }
table.two { width: 80px; }
table.three { width: 130px; }
table.four { width: 180px; }
table.five { width: 230px; }
table.six { width: 280px; }
table.seven { width: 330px; }
table.eight { width: 380px; }
table.nine { width: 430px; }
table.ten { width: 480px; }
table.eleven { width: 530px; }
table.twelve { width: 580px; }

table.one center { min-width: 30px; }
table.two center { min-width: 80px; }
table.three center { min-width: 130px; }
table.four center { min-width: 180px; }
table.five center { min-width: 230px; }
table.six center { min-width: 280px; }
table.seven center { min-width: 330px; }
table.eight center { min-width: 380px; }
table.nine center { min-width: 430px; }
table.ten center { min-width: 480px; }
table.eleven center { min-width: 530px; }
table.twelve center { min-width: 580px; }

.body .columns td.one,
.body .column td.one, { width: 8.333333% !important; }
.body .columns td.two,
.body .column td.two { width: 16.666666% !important; }
.body .columns td.three,
.body .column td.three { width: 25% !important; }
.body .columns td.four,
.body .column td.four { width: 33.333333% !important; }
.body .columns td.five,
.body .column td.five { width: 41.666666% !important; }
.body .columns td.six,
.body .column td.six { width: 50% !important; }
.body .columns td.seven,
.body .column td.seven { width: 58.333333% !important; }
.body .columns td.eight,
.body .column td.eight { width: 66.666666% !important; }
.body .columns td.nine,
.body .column td.nine { width: 75% !important; }
.body .columns td.ten,
.body .column td.ten { width: 83.333333% !important; }
.body .columns td.eleven,
.body .column td.eleven { width: 91.666666% !important; }
.body .columns td.twelve,
.body .column td.twelve { width: 100% !important; }

td.offset-by-one { padding-left: 50px; }
td.offset-by-two { padding-left: 100px; }
td.offset-by-three { padding-left: 150px; }
td.offset-by-four { padding-left: 200px; }
td.offset-by-five { padding-left: 250px; }
td.offset-by-six { padding-left: 300px; }
td.offset-by-seven { padding-left: 350px; }
td.offset-by-eight { padding-left: 400px; }
td.offset-by-nine { padding-left: 450px; }
td.offset-by-ten { padding-left: 500px; }
td.offset-by-eleven { padding-left: 550px; }

td.sub-offset-by-one { padding-left: 5.172413% !important; }
td.sub-offset-by-two { padding-left: 13.793102% !important; }
td.sub-offset-by-three { padding-left: 22.413791% !important; }
td.sub-offset-by-four { padding-left: 31.034480% !important; }
td.sub-offset-by-five { padding-left: 39.655169% !important; }
td.sub-offset-by-six { padding-left: 48.275858% !important; }
td.sub-offset-by-seven { padding-left: 56.896547% !important; }
td.sub-offset-by-eight { padding-left: 65.517236% !important; }
td.sub-offset-by-nine { padding-left: 74.137925% !important; }
td.sub-offset-by-ten { padding-left: 82.758614% !important; }
td.sub-offset-by-eleven { padding-left: 91.379303% !important; }

td.expander {
  visibility: hidden;
  width: 0px;
  padding: 0 !important;
}

table.columns .text-pad {
  padding-left: 10px;
  padding-right: 10px;
}

table.columns .left-text-pad {
  padding-left: 10px;
}

table.columns .right-text-pad {
  padding-right: 10px;
}

/* Block Grid */

.block-grid {
  width: 100%;
  max-width: 580px;
}

.block-grid td {
  display: inline-block;
  padding:10px;
}

.two-up td {
  width:270px;
}

.three-up td {
  width:173px;
}

.four-up td {
  width:125px;
}

.five-up td {
  width:96px;
}

.six-up td {
  width:76px;
}

.seven-up td {
  width:62px;
}

.eight-up td {
  width:52px;
}

/* Alignment & Visibility Classes */

table.center, td.center {
  text-align: center;
}

h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
  text-align: center;
}

span.center {
  display: block;
  width: 100%;
  text-align: center;
}

img.center {
  margin: 0 auto;
  float: none;
}

.show-for-small,
.hide-for-desktop {
  display: none;
}

/* Typography */

body, table.body, h1, h2, h3, h4, h5, h6, p { 
  color: #222222;
  font-family: "Helvetica", "Arial", sans-serif; 
  font-weight: normal; 
  padding:0; 
  margin: 0;
  text-align: left; 
  line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 {
  word-break: normal;
}

h1 {font-size: 40px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
body, table.body, p {font-size: 14px;line-height:19px;}

p { 
  padding-bottom: 10px;
}

small {
  font-size: 10px;
}

a {
  color: #2ba6cb; 
  text-decoration: none;
}

a:hover { 
  color: #2795b6 !important;
}

a:active { 
  color: #2795b6 !important;
}

a:visited { 
  color: #2ba6cb !important;
}

h1 a, 
h2 a, 
h3 a, 
h4 a, 
h5 a, 
h6 a {
  color: #2ba6cb !important;
}

h1 a:active, 
h2 a:active,  
h3 a:active, 
h4 a:active, 
h5 a:active, 
h6 a:active { 
  color: #2ba6cb !important; 
} 

h1 a:visited, 
h2 a:visited,  
h3 a:visited, 
h4 a:visited, 
h5 a:visited, 
h6 a:visited { 
  color: #2ba6cb !important; 
} 

/* Panels */

td.panel {
  background: #f2f2f2;
  border: 1px solid #d9d9d9;
  padding: 10px !important;
}

/* Buttons */

table.button,
table.tiny-button,
table.small-button,
table.medium-button,
table.large-button {
  width: 100%;
  overflow: hidden;
}

table.button td,
table.tiny-button td,
table.small-button td,
table.medium-button td,
table.large-button td {
  display: block;
  width: auto !important;
  text-align: center;
  background: #2ba6cb;
  border: 1px solid #2284a1;
  color: #ffffff;
  padding: 8px 0;
}

table.tiny-button td {
  padding: 5px 0 4px;
}

table.small-button td {
  padding: 8px 0 7px;
}

table.medium-button td {
  padding: 12px 0 10px;
}

table.large-button td {
  padding: 21px 0 18px;
}

table.button td a,
table.tiny-button td a,
table.small-button td a,
table.medium-button td a,
table.large-button td a {
  font-weight: bold;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
}

table.tiny-button td a {
  font-size: 12px;
  font-weight: normal;
}

table.small-button td a {
  font-size: 16px;
}

table.medium-button td a {
  font-size: 20px;
}

table.large-button td a {
  font-size: 24px;
}

table.button:hover td,
table.button:visited td,
table.button:active td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:visited td a,
table.button:active td a {
  color: #fff !important;
}

table.button:hover td,
table.tiny-button:hover td,
table.small-button:hover td,
table.medium-button:hover td,
table.large-button:hover td {
  background: #2795b6 !important;
}

table.button:hover td a,
table.button:active td a,
table.button td a:visited,
table.tiny-button:hover td a,
table.tiny-button:active td a,
table.tiny-button td a:visited,
table.small-button:hover td a,
table.small-button:active td a,
table.small-button td a:visited,
table.medium-button:hover td a,
table.medium-button:active td a,
table.medium-button td a:visited,
table.large-button:hover td a,
table.large-button:active td a,
table.large-button td a:visited {
  color: #ffffff !important; 
}

table.secondary td {
  background: #e9e9e9;
  border-color: #d0d0d0;
  color: #555;
}

table.secondary td a {
  color: #555;
}

table.secondary:hover td {
  background: #d0d0d0 !important;
  color: #555;
}

table.secondary:hover td a,
table.secondary td a:visited,
table.secondary:active td a {
  color: #555 !important;
}

table.success td {
  background: #5da423;
  border-color: #457a1a;
}

table.success:hover td {
  background: #457a1a !important;
}

table.alert td {
  background: #c60f13;
  border-color: #970b0e;
}

table.alert:hover td {
  background: #970b0e !important;
}

table.radius td {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

table.round td {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

.button table,
.tiny-button table,
.small-button table,
.medium-button table,
.large-button table {
  width: 100%;
  overflow: hidden;
}

.button table td,
.tiny-button table td,
.small-button table td,
.medium-button table td,
.large-button table td {
  display: block;
  width: auto !important;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  background: #2ba6cb;
  border: 1px solid #2284a1;
}

.tiny-button table td {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: normal;
}

.button table td,
.small-button table td {
  padding: 8px 15px;
  font-size: 16px;
}

.medium-button table td {
  padding: 12px 24px;
  font-size: 20px;
}

.large-button table td {
  padding: 21px 30px;
  font-size: 24px;
}

.button:hover table td,
.tiny-button:hover table td,
.small-button:hover table td,
.medium-button:hover table td,
.large-button:hover table td {
  background: #2795b6 !important;
}

.button,
.button:hover,
.button:active,
.button:visited,
.tiny-button,
.tiny-button:hover,
.tiny-button:active,
.tiny-button:visited,
.small-button,
.small-button:hover,
.small-button:active,
.small-button:visited,
.medium-button,
.medium-button:hover,
.medium-button:active,
.medium-button:visited,
.large-button,
.large-button:hover,
.large-button:active,
.large-button:visited {
  color: #ffffff !important; 
  font-family: Helvetica, Arial, sans-serif; 
  text-decoration: none;
}

.secondary table td {
  background: #e9e9e9;
  border-color: #d0d0d0;
}

.secondary:hover table td {
  background: #d0d0d0 !important;
}

.success table td {
  background: #5da423;
  border-color: #457a1a;
}

.success:hover table td {
  background: #457a1a !important;
}

.alert table td {
  background: #c60f13;
  border-color: #970b0e;
}

.alert:hover table td {
  background: #970b0e !important;
}

.radius table td {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.round table td {
  -webkit-border-radius: 500px;
  -moz-border-radius: 500px;
  border-radius: 500px;
}

/* Outlook First */

body.outlook p {
  display: inline !important;
}

/*  Media Queries */

@media only screen and (max-width: 600px) {

  table[class="body"] img {
    width: auto !important;
    height: auto !important;
  }

  table[class="body"] center {
    min-width: 0 !important;
  }

  table[class="body"] .container {
    width: 95% !important;
  }

  table[class="body"] .row {
    width: 100% !important;
    display: block !important;
  }

  table[class="body"] .wrapper {
    display: block !important;
    padding-right: 0 !important;
  }

  table[class="body"] .columns,
  table[class="body"] .column {
    table-layout: fixed !important;
    float: none !important;
    width: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    display: block !important;
  }

  table[class="body"] .wrapper.first .columns,
  table[class="body"] .wrapper.first .column {
    display: table !important;
  }

  table[class="body"] table.columns td,
  table[class="body"] table.column td {
    width: 100% !important;
  }

  table[class="body"] td.offset-by-one,
  table[class="body"] td.offset-by-two,
  table[class="body"] td.offset-by-three,
  table[class="body"] td.offset-by-four,
  table[class="body"] td.offset-by-five,
  table[class="body"] td.offset-by-six,
  table[class="body"] td.offset-by-seven,
  table[class="body"] td.offset-by-eight,
  table[class="body"] td.offset-by-nine,
  table[class="body"] td.offset-by-ten,
  table[class="body"] td.offset-by-eleven {
    padding-left: 0 !important;
  }

  table[class="body"] .expander {
    width: 9999px !important;
  }

  table[class="body"] .right-text-pad {
    padding-left: 10px !important;
  }

  table[class="body"] .left-text-pad {
    padding-right: 10px !important;
  }

  table[class="body"] .hide-for-small,
  table[class="body"] .show-for-desktop {
    display: none !important;
  }

  table[class="body"] .show-for-small,
  table[class="body"] .hide-for-desktop {
    display: inherit !important;
  }
}
  </style>
  <style>

    table.facebook td {
      background: #3b5998;
      border-color: #2d4473;
    }

    table.facebook:hover td {
      background: #2d4473 !important;
    }

    table.twitter td {
      background: #00acee;
      border-color: #0087bb;
    }

    table.twitter:hover td {
      background: #0087bb !important;
    }

    table.google-plus td {
      background-color: #DB4A39;
      border-color: #CC0000;
    }

    table.google-plus:hover td {
      background: #CC0000 !important;
    }

    .template-label {
      color: #ffffff;
      font-weight: bold;
      font-size: 11px;
    }

    .callout .panel {
      background: #ECF8FF;
      border-color: #b9e5ff;
    }

    .header {
      background: #999999;
    }

    .footer .wrapper {
      background: #ebebeb;
    }

    .footer h5 {
      padding-bottom: 10px;
    }

    table.columns .text-pad {
      padding-left: 10px;
      padding-right: 10px;
    }

    table.columns .left-text-pad {
      padding-left: 10px;
    }

    table.columns .right-text-pad {
      padding-right: 10px;
    }

    @media only screen and (max-width: 600px) {

      table[class="body"] .right-text-pad {
        padding-left: 10px !important;
      }

      table[class="body"] .left-text-pad {
        padding-right: 10px !important;
      }
    }

  </style>
</head>
<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td class="six sub-columns">
                              <img src="http://placehold.it/200x50">
                            </td>
                            <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
                              <span class="template-label">SIDEBAR HERO</span>
                            </td>

                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <br>

          <table class="container">
            <tr>
              <td>

              <!-- content start -->
              <table class="row">
                <tr>
                  <td class="wrapper last">

                    <table class="twelve columns">
                      <tr>
                        <td>
                          <h1>Welcome, Daneel Olivan</h1>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                          <img width="580" height="300" src="http://placehold.it/580x300">
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                    <table class="twelve columns">
                      <tr>
                        <td class="panel">
                          <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

              <br>  <!-- Break Tag for row -->

              <table class="row">
                <tr>
                  <td class="wrapper">

                    <table class="six columns">
                      <tr>
                        <td>

                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>

                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>

                          <table class="button">
                            <tr>
                              <td>
                                <a href="#">Click Me!</a>
                              </td>
                            </tr>
                          </table>

                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                  <td class="wrapper last">

                    <table class="six columns">
                      <tr>
                        <td class="panel">
                          <h6>Header Thing</h6>
                          <p>Sub-head or something</p>
                          <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                            <hr>
                            <table>
                              <tr>
                                <td>
                                  <a href="#">Just a Plain Link &raquo;</a>
                                </td>
                              </tr>
                            </table>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>
                    <br>
                    <table class="six columns">
                      <tr>
                        <td class="panel">
                          <h6 style="margin-bottom:5px;">Connect With Us:</h6>
                          <table class="tiny-button facebook">
                              <tr>
                                <td>
                                  <a href="#">Facebook</a>
                                </td>
                              </tr>
                            </table>

                            <hr>

                            <table class="tiny-button twitter">
                              <tr>
                                <td>
                                  <a href="#">Twitter</a>
                                </td>
                              </tr>
                            </table>

                            <hr>

                            <table class="tiny-button google-plus">
                              <tr>
                                <td>
                                  <a href="#">Google +</a>
                                </td>
                              </tr>
                            </table>
                          <br>
                          <h6 style="margin-bottom:5px;">Contact Info:</h6>
                          <p>Phone: <b>408.341.0600</b></p>
                          <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
              <br>
              <br>
              <!-- Legal + Unsubscribe -->            
              <table class="row">
                <tr>
                  <td class="wrapper last">

                    <table class="twelve columns">
                      <tr>
                        <td align="center">
                          <center>
                            <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#"><unsubscribe>Unsubscribe</unsubscribe></a></p>
                          </center>
                        </td>
                        <td class="expander"></td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>

              <!-- container end below -->
              </td>
            </tr>
          </table> 

        </center>
      </td>
    </tr>
  </table>
</body>
</html>

Bye Defcon0

mmerriweather commented 10 years ago

The same issue happens in Outlook Exchange mobile also.

Defcon0 commented 10 years ago

I have a suspicion: The inliner tool on your website also "inlines" the media queries, i.e. removes them. This cannot be intended, can it?

thedeerchild commented 10 years ago

This issue should have been fixed by v1.0.4. If you try the most recent version on the site, are you still experiencing the problem?

@Defcon0: The inliner doesn't remove the media queries. It places any CSS that can't be inlined (media queries, :hover states, etc) in a <style> tag inside the <body>, since a lot of clients strip out the <head> tag.

@mmerriweather: We don't support or test for Outlook Exchange Mobile right now, but any additional information you can give me would be helpful in possibly supporting it in the future.

mmerriweather commented 10 years ago

The entire body of the email is pushed to an align left. It almost seems as If Outlook strips some of the media queries out when collapsing to mobile Outlook.

Defcon0 commented 10 years ago

OK, just tested the latest version (1.0.4). Same issue here (iOS Mail App). Here's the code which is being sent (I used sidebar-hero.html from the latest zip accessible through your website):

<!-- Inliner Build Version 4a491cbbdbf75d9c4e9bed94bc553ed45f2d0603 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body style="width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0;"><style type="text/css">
a:hover {
color: #2795b6 !important;
}
a:active {
color: #2795b6 !important;
}
a:visited {
color: #2ba6cb !important;
}
h1 a:active {
color: #2ba6cb !important;
}
h2 a:active {
color: #2ba6cb !important;
}
h3 a:active {
color: #2ba6cb !important;
}
h4 a:active {
color: #2ba6cb !important;
}
h5 a:active {
color: #2ba6cb !important;
}
h6 a:active {
color: #2ba6cb !important;
}
h1 a:visited {
color: #2ba6cb !important;
}
h2 a:visited {
color: #2ba6cb !important;
}
h3 a:visited {
color: #2ba6cb !important;
}
h4 a:visited {
color: #2ba6cb !important;
}
h5 a:visited {
color: #2ba6cb !important;
}
h6 a:visited {
color: #2ba6cb !important;
}
table.button:hover td {
background: #2795b6 !important;
}
table.button:visited td {
background: #2795b6 !important;
}
table.button:active td {
background: #2795b6 !important;
}
table.button:hover td a {
color: #fff !important;
}
table.button:visited td a {
color: #fff !important;
}
table.button:active td a {
color: #fff !important;
}
table.button:hover td {
background: #2795b6 !important;
}
table.tiny-button:hover td {
background: #2795b6 !important;
}
table.small-button:hover td {
background: #2795b6 !important;
}
table.medium-button:hover td {
background: #2795b6 !important;
}
table.large-button:hover td {
background: #2795b6 !important;
}
table.button:hover td a {
color: #ffffff !important;
}
table.button:active td a {
color: #ffffff !important;
}
table.button td a:visited {
color: #ffffff !important;
}
table.tiny-button:hover td a {
color: #ffffff !important;
}
table.tiny-button:active td a {
color: #ffffff !important;
}
table.tiny-button td a:visited {
color: #ffffff !important;
}
table.small-button:hover td a {
color: #ffffff !important;
}
table.small-button:active td a {
color: #ffffff !important;
}
table.small-button td a:visited {
color: #ffffff !important;
}
table.medium-button:hover td a {
color: #ffffff !important;
}
table.medium-button:active td a {
color: #ffffff !important;
}
table.medium-button td a:visited {
color: #ffffff !important;
}
table.large-button:hover td a {
color: #ffffff !important;
}
table.large-button:active td a {
color: #ffffff !important;
}
table.large-button td a:visited {
color: #ffffff !important;
}
table.secondary:hover td {
background: #d0d0d0 !important; color: #555;
}
table.secondary:hover td a {
color: #555 !important;
}
table.secondary td a:visited {
color: #555 !important;
}
table.secondary:active td a {
color: #555 !important;
}
table.success:hover td {
background: #457a1a !important;
}
table.alert:hover td {
background: #970b0e !important;
}
table.facebook:hover td {
background: #2d4473 !important;
}
table.twitter:hover td {
background: #0087bb !important;
}
table.google-plus:hover td {
background: #CC0000 !important;
}
@media only screen and (max-width: 600px) {
  table[class="body"] img {
    width: auto !important; height: auto !important;
  }
  table[class="body"] center {
    min-width: 0 !important;
  }
  table[class="body"] .container {
    width: 95% !important;
  }
  table[class="body"] .row {
    width: 100% !important; display: block !important;
  }
  table[class="body"] .wrapper {
    display: block !important; padding-right: 0 !important;
  }
  table[class="body"] .columns {
    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
  }
  table[class="body"] .column {
    table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
  }
  table[class="body"] .wrapper.first .columns {
    display: table !important;
  }
  table[class="body"] .wrapper.first .column {
    display: table !important;
  }
  table[class="body"] table.columns td {
    width: 100% !important;
  }
  table[class="body"] table.column td {
    width: 100% !important;
  }
  table[class="body"] td.offset-by-one {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-two {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-three {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-four {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-five {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-six {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-seven {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-eight {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-nine {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-ten {
    padding-left: 0 !important;
  }
  table[class="body"] td.offset-by-eleven {
    padding-left: 0 !important;
  }
  table[class="body"] .expander {
    width: 9999px !important;
  }
  table[class="body"] .right-text-pad {
    padding-left: 10px !important;
  }
  table[class="body"] .text-pad-right {
    padding-left: 10px !important;
  }
  table[class="body"] .left-text-pad {
    padding-right: 10px !important;
  }
  table[class="body"] .text-pad-left {
    padding-right: 10px !important;
  }
  table[class="body"] .hide-for-small {
    display: none !important;
  }
  table[class="body"] .show-for-desktop {
    display: none !important;
  }
  table[class="body"] .show-for-small {
    display: inherit !important;
  }
  table[class="body"] .hide-for-desktop {
    display: inherit !important;
  }
  table[class="body"] .right-text-pad {
    padding-left: 10px !important;
  }
  table[class="body"] .left-text-pad {
    padding-right: 10px !important;
  }
}
</style>
  <table class="body" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; height: 100%; width: 100%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; padding: 0;">
        <center style="width: 100%; min-width: 580px;">

          <table class="row header" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; background: #999999; padding: 0px;" bgcolor="#999999"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="center" align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; padding: 0;" valign="top">
                <center style="width: 100%; min-width: 580px;">

                  <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; padding: 10px 0px 0px;" align="left" valign="top">

                        <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="six sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 50% !important; padding: 0px 10px 10px 0px;" align="left" valign="top">
                              <img src="http://placehold.it/200x50" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left" /></td>
                            <td class="six sub-columns last" style="text-align: right; vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; min-width: 0px; width: 50% !important; padding: 0px 0px 10px;" align="right" valign="middle">
                              <span class="template-label" style="color: #ffffff; font-weight: bold; font-size: 11px;">SIDEBAR HERO</span>
                            </td>
                            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>  
                          </tr></table></td>
                    </tr></table></center>
              </td>
            </tr></table><br /><table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0;" align="left" valign="top">

              <!-- content start -->
              <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; padding: 10px 0px 0px;" align="left" valign="top">

                    <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                          <h1 style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 40px; margin: 0; padding: 0;" align="left">Welcome, Daneel Olivan</h1>
                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                          <img width="580" height="300" src="http://placehold.it/580x300" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left" /></td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table><table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; background: #f2f2f2; padding: 10px; border: 1px solid #d9d9d9;" align="left" bgcolor="#f2f2f2" valign="top">
                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#" style="color: #2ba6cb; text-decoration: none;">Click it! »</a></p>
                        </td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table></td>
                </tr></table><br /><!-- Break Tag for row --><table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="wrapper" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; padding: 10px 20px 0px 0px;" align="left" valign="top">

                    <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">

                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>

                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>

                          <table class="button" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; display: block; width: auto !important; color: #ffffff; background: #2ba6cb; padding: 8px 0; border: 1px solid #2284a1;" align="center" bgcolor="#2ba6cb" valign="top">
                                <a href="#" style="color: #ffffff; text-decoration: none; font-weight: bold; font-family: Helvetica, Arial, sans-serif; font-size: 16px;">Click Me!</a>
                              </td>
                            </tr></table></td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table></td>
                  <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; padding: 10px 0px 0px;" align="left" valign="top">

                    <table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; background: #f2f2f2; padding: 10px; border: 1px solid #d9d9d9;" align="left" bgcolor="#f2f2f2" valign="top">
                          <h6 style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 20px; margin: 0; padding: 0;" align="left">Header Thing</h6>
                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Sub-head or something</p>
                          <table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" align="left" valign="top">
                                  <a href="#" style="color: #2ba6cb; text-decoration: none;">Just a Plain Link »</a>
                                </td>
                              </tr></table></td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table><br /><table class="six columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 280px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="panel" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; background: #f2f2f2; padding: 10px; border: 1px solid #d9d9d9;" align="left" bgcolor="#f2f2f2" valign="top">
                          <h6 style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 20px; margin: 0 0 5px; padding: 0;" align="left">Connect With Us:</h6>
                          <table class="tiny-button facebook" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; display: block; width: auto !important; color: #ffffff; background: #3b5998; padding: 5px 0 4px; border: 1px solid #2d4473;" align="center" bgcolor="#3b5998" valign="top">
                                  <a href="#" style="color: #ffffff; text-decoration: none; font-weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">Facebook</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table class="tiny-button twitter" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; display: block; width: auto !important; color: #ffffff; background: #00acee; padding: 5px 0 4px; border: 1px solid #0087bb;" align="center" bgcolor="#00acee" valign="top">
                                  <a href="#" style="color: #ffffff; text-decoration: none; font-weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">Twitter</a>
                                </td>
                              </tr></table><hr style="color: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table class="tiny-button google-plus" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; display: block; width: auto !important; color: #ffffff; background: #DB4A39; padding: 5px 0 4px; border: 1px solid #cc0000;" align="center" bgcolor="#DB4A39" valign="top">
                                  <a href="#" style="color: #ffffff; text-decoration: none; font-weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">Google +</a>
                                </td>
                              </tr></table><br /><h6 style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 1.3; word-break: normal; font-size: 20px; margin: 0 0 5px; padding: 0;" align="left">Contact Info:</h6>
                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Phone: <b>408.341.0600</b></p>
                          <p style="color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="left">Email: <a href="mailto:hseldon@trantor.com" style="color: #2ba6cb; text-decoration: none;">hseldon@trantor.com</a></p>
                        </td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table></td>
                </tr></table><br /><br /><!-- Legal + Unsubscribe --><table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; padding: 10px 0px 0px;" align="left" valign="top">

                    <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;"><tr style="vertical-align: top; text-align: left; padding: 0;" align="left"><td align="center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; padding: 0px 0px 10px;" valign="top">
                          <center style="width: 100%; min-width: 580px;">
                            <p style="text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" align="center"><a href="#" style="color: #2ba6cb; text-decoration: none;">Terms</a> | <a href="#" style="color: #2ba6cb; text-decoration: none;">Privacy</a> | <a href="#" style="color: #2ba6cb; text-decoration: none;"><unsubscribe>Unsubscribe</unsubscribe></a></p>
                          </center>
                        </td>
                        <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; padding: 0;" align="left" valign="top"></td>
                      </tr></table></td>
                </tr></table><!-- container end below --></td>
            </tr></table></center>
      </td>
    </tr></table></body>
</html>
thedeerchild commented 10 years ago

@Defcon0: I think I figured out what's going on. Are you sending the emails from a hosted service like Campaign Monitor or MailChimp (or a command line tool like the PHP mail() function)? The only way I could recreate the issue was to open the HTML file in a browser and click "share", then send it with Apple Mail, a process which is known to strip out a bunch of the styles.

@mmerriweather: Same question about sending process, but also, is your email being routed through a Microsoft Exchange server at any point? If so, would you please try connecting another, non-Exchange email account to the app (such as a Gmail or Yahoo account) and tell me if the email still has the rendering bugs when sent to that address?

Defcon0 commented 10 years ago

Yes, the mail is being sent by mail() through the Contao CMS (contao.org).

Here's the transferred mail source from thunderbird:

From - Tue Nov 26 14:05:36 2013
X-Account-Key: account1
X-UIDL: 0000097250cb1fbc
X-Mozilla-Status: 0001
X-Mozilla-Status2: 00000000
X-Mozilla-Keys:                                                                                 
Received: from [91.90.147.151] (helo=domain.de)
    by mail.hhsp.de with esmtp (Exim 4.72)
    (envelope-from <info@domain.de>)
    id 1VlIKW-00022G-Fd
    for abc@domain2.de; Tue, 26 Nov 2013 14:05:29 +0100
Received: by domain.de (Postfix, from userid 1000)
    id D5248C44644; Tue, 26 Nov 2013 14:05:35 +0100 (CET)
To: abc@domain2.de
Subject: Responsive Newsletter
X-PHP-Originating-Script: 1000:SimpleMailInvoker.php
Message-ID: <0f8a213894f274a20f138ba6fc249315@www.domain.de>
Date: Tue, 26 Nov 2013 14:05:35 +0100
From: domain <info@domain.de>
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable
X-Priority: 3 (Normal)
X-Mailer: Contao Open Source CMS
X-HH-Spam-Comment: Scanned on mail.hhsp.de
X-HH-Spam-Score: -0.0
X-HH-Spam-Level: /
X-HH-Spam-Report: BAYES_00=-1.9,HTML_IMAGE_RATIO_06=0.001,HTML_MESSAGE=0.001,HTML_MIME_NO_HTML_TAG=0.377,MIME_HTML_ONLY=0.723,RDNS_NONE=0.793

 =20
   =20
   =20
 =20
  <style type=3D"text/cs=
s">
a:hover {
color: #2795b6 !important;
}
a:activ=
e {
color: #2795b6 !important;
}
a:visited {
color: #2=
ba6cb !important;
}
h1 a:active {
color: #2ba6cb !importa=
nt;
}
h2 a:active {
color: #2ba6cb !important;
}
h=
3 a:active {
color: #2ba6cb !important;
}
h4 a:active=
 {
color: #2ba6cb !important;
}
h5 a:active {
color: =
#2ba6cb !important;
}
h6 a:active {
color: #2ba6cb !impor=
tant;
}
h1 a:visited {
color: #2ba6cb !important;=

}
h2 a:visited {
color: #2ba6cb !important;
}
h=
3 a:visited {
color: #2ba6cb !important;
}
h4 a:visited =
{
color: #2ba6cb !important;
}
h5 a:visited {
color:=
 #2ba6cb !important;
}
h6 a:visited {
color: #2ba6cb !import=
ant;
}
table.button:hover td {
background: #2795b6 !importan=
t;
}
table.button:visited td {
background: #2795b6 !importan=
t;
}
table.button:active td {
background: #2795b6 !important=
;
}
table.button:hover td a {
color: #fff !important;=

}
table.button:visited td a {
color: #fff !importan=
t;
}
table.button:active td a {
color: #fff !importan=
t;
}
table.button:hover td {
background: #2795b6 !important;=

}
table.tiny-button:hover td {
background: #2795b6 !impo=
rtant;
}
table.small-button:hover td {
background: #2795b6 !=
important;
}
table.medium-button:hover td {
background: #=
2795b6 !important;
}
table.large-button:hover td {
backgroun=
d: #2795b6 !important;
}
table.button:hover td a {
color: #f=
fffff !important;
}
table.button:active td a {
color: #ff=
ffff !important;
}
table.button td a:visited {
color: #fffff=
f !important;
}
table.tiny-button:hover td a {
color: #ff=
ffff !important;
}
table.tiny-button:active td a {
color: #f=
fffff !important;
}
table.tiny-button td a:visited {
color=
: #ffffff !important;
}
table.small-button:hover td a {
c=
olor: #ffffff !important;
}
table.small-button:active td =
a {
color: #ffffff !important;
}
table.small-button td a:v=
isited {
color: #ffffff !important;
}
table.medium-button=
:hover td a {
color: #ffffff !important;
}
table.medium-butt=
on:active td a {
color: #ffffff !important;
}
table.mediu=
m-button td a:visited {
color: #ffffff !important;
}
table=
.large-button:hover td a {
color: #ffffff !important;
}
t=
able.large-button:active td a {
color: #ffffff !important=
;
}
table.large-button td a:visited {
color: #ffffff !imp=
ortant;
}
table.secondary:hover td {
background: #d0d0d0 !=
important; color: #555;
}
table.secondary:hover td a {
co=
lor: #555 !important;
}
table.secondary td a:visited {
co=
lor: #555 !important;
}
table.secondary:active td a {
col=
or: #555 !important;
}
table.success:hover td {
backgroun=
d: #457a1a !important;
}
table.alert:hover td {
backgroun=
d: #970b0e !important;
}
table.facebook:hover td {
backgroun=
d: #2d4473 !important;
}
table.twitter:hover td {
background=
: #0087bb !important;
}
table.google-plus:hover td {
backg=
round: #CC0000 !important;
}
@media only screen and (max-width: =
600px) {
  table[class=3D"body"] img {
    width: auto !import=
ant; height: auto !important;
  }
  table[class=3D"body"] cent=
er {
    min-width: 0 !important;
  }
  table[class=3D"bod=
y"] .container {
    width: 95% !important;
  }
  table[c=
lass=3D"body"] .row {
    width: 100% !important; display: block !i=
mportant;
  }
  table[class=3D"body"] .wrapper {
    displ=
ay: block !important; padding-right: 0 !important;
  }
  table[c=
lass=3D"body"] .columns {
    table-layout: fixed !important; float=
: none !important; width: 100% !important; padding-right: 0px !important=
; padding-left: 0px !important; display: block !important;
  }
 =
 table[class=3D"body"] .column {
    table-layout: fixed !important; f=
loat: none !important; width: 100% !important; padding-right: 0px !impor=
tant; padding-left: 0px !important; display: block !important;
 =
 }
  table[class=3D"body"] .wrapper.first .columns {
    displ=
ay: table !important;
  }
  table[class=3D"body"] .wrapper.fir=
st .column {
    display: table !important;
  }
  table[c=
lass=3D"body"] table.columns td {
    width: 100% !important;
 =
 }
  table[class=3D"body"] table.column td {
    width: 100% !=
important;
  }
  table[class=3D"body"] td.offset-by-one {
 =
   padding-left: 0 !important;
  }
  table[class=3D"body"] td.=
offset-by-two {
    padding-left: 0 !important;
  }
  tab=
le[class=3D"body"] td.offset-by-three {
    padding-left: 0 !important=
;
  }
  table[class=3D"body"] td.offset-by-four {
    paddi=
ng-left: 0 !important;
  }
  table[class=3D"body"] td.offset-b=
y-five {
    padding-left: 0 !important;
  }
  table[cla=
ss=3D"body"] td.offset-by-six {
    padding-left: 0 !important=
;
  }
  table[class=3D"body"] td.offset-by-seven {
    pad=
ding-left: 0 !important;
  }
  table[class=3D"body"] td.offset=
-by-eight {
    padding-left: 0 !important;
  }
  table[c=
lass=3D"body"] td.offset-by-nine {
    padding-left: 0 !important;=

  }
  table[class=3D"body"] td.offset-by-ten {
    paddin=
g-left: 0 !important;
  }
  table[class=3D"body"] td.offset-by=
-eleven {
    padding-left: 0 !important;
  }
  table[cl=
ass=3D"body"] .expander {
    width: 9999px !important;
  }=

  table[class=3D"body"] .right-text-pad {
    padding-left: 1=
0px !important;
  }
  table[class=3D"body"] .text-pad-right=
 {
    padding-left: 10px !important;
  }
  table[class=3D=
"body"] .left-text-pad {
    padding-right: 10px !important;
  }=

  table[class=3D"body"] .text-pad-left {
    padding-right: 10=
px !important;
  }
  table[class=3D"body"] .hide-for-small=
 {
    display: none !important;
  }
  table[class=3D"body=
"] .show-for-desktop {
    display: none !important;
  }
  t=
able[class=3D"body"] .show-for-small {
    display: inherit !important=
;
  }
  table[class=3D"body"] .hide-for-desktop {
    displ=
ay: inherit !important;
  }
  table[class=3D"body"] .right-text=
-pad {
    padding-left: 10px !important;
  }
  table[cl=
ass=3D"body"] .left-text-pad {
    padding-right: 10px !important;=

  }
}
</style>
  <table class=3D"body" style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; height: 100%; width: 100%; color: #222222; font-family: 'Helvet=
ica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-=
size: 14px; margin: 0; padding: 0;"><tr style=3D"vertical-align: top; text=
-align: left; padding: 0;" align=3D"left"><td class=3D"center" align=3D"ce=
nter" valign=3D"top" style=3D"word-break: break-word; -webkit-hyphens: a=
uto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !impor=
tant; vertical-align: top; text-align: center; padding: 0;">
       =
=20
        =20
          <table class=3D"row header" style=3D"border=
-spacing: 0; border-collapse: collapse; vertical-align: top; text-align:=
 left; width: 100%; position: relative; background: #999999; padding: 0p=
x;" bgcolor=3D"#999999"><tr style=3D"vertical-align: top; text-align: le=
ft; padding: 0;" align=3D"left"><td class=3D"center" align=3D"center" styl=
e=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hy=
phens: auto; border-collapse: collapse !important; vertical-align: top; =
text-align: center; padding: 0;" valign=3D"top">
             =
  =20
         =20
                  <table class=3D"container" sty=
le=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; t=
ext-align: inherit; width: 580px; margin: 0 auto; padding: 0;"><tr style=
=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"left"><=
td class=3D"wrapper last" style=3D"word-break: break-word; -webkit-hyphe=
ns: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !=
important; vertical-align: top; text-align: left; position: relative; pa=
dding: 10px 0px 0px;" align=3D"left" valign=3D"top">
           =
=20
                        <table class=3D"twelve columns" style=3D"b=
order-spacing: 0; border-collapse: collapse; vertical-align: top; text-a=
lign: left; width: 580px; margin: 0 auto; padding: 0;"><tr style=3D"vertic=
al-align: top; text-align: left; padding: 0;" align=3D"left"><td class=
=3D"six sub-columns" style=3D"word-break: break-word; -webkit-hyphens: a=
uto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !impor=
tant; vertical-align: top; text-align: left; min-width: 0px; width: 50% =
!important; padding: 0px 10px 10px 0px;" align=3D"left" valign=3D"to=
p">
                              <img src=3D"http://placehold.it/2=
00x50" style=3D"outline: none; text-decoration: none; -ms-interpolation-mo=
de: bicubic; width: auto; max-width: 100%; float: left; clear: both; dis=
play: block;" align=3D"left" /></td>
                            <td c=
lass=3D"six sub-columns last" style=3D"text-align: right; vertical-align=
: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: a=
uto; hyphens: auto; border-collapse: collapse !important; min-width: 0px=
; width: 50% !important; padding: 0px 0px 10px;" align=3D"right" valig=
n=3D"middle">
                              <span class=3D"template-l=
abel" style=3D"color: #ffffff; font-weight: bold; font-size: 11px;">SIDEBA=
R HERO</span>
                            </td>
                 =
           <td class=3D"expander" style=3D"word-break: break-word; -webk=
it-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: co=
llapse !important; vertical-align: top; text-align: left; visibility: hi=
dden; width: 0px; padding: 0;" align=3D"left" valign=3D"top"></td>  =

                          </tr></table></td>
                  =
  </tr></table>
              </td>
            </tr></table><br =
/><table class=3D"container" style=3D"border-spacing: 0; border-collapse=
: collapse; vertical-align: top; text-align: inherit; width: 580px; marg=
in: 0 auto; padding: 0;"><tr style=3D"vertical-align: top; text-align: lef=
t; padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -web=
kit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: c=
ollapse !important; vertical-align: top; text-align: left; padding: 0;" =
align=3D"left" valign=3D"top">
             =20
              =

              <table class=3D"row" style=3D"border-spacing: 0; bord=
er-collapse: collapse; vertical-align: top; text-align: left; width: 100=
%; position: relative; display: block; padding: 0px;"><tr style=3D"vertica=
l-align: top; text-align: left; padding: 0;" align=3D"left"><td class=3D=
"wrapper last" style=3D"word-break: break-word; -webkit-hyphens: auto; -mo=
z-hyphens: auto; hyphens: auto; border-collapse: collapse !important; ve=
rtical-align: top; text-align: left; position: relative; padding: 10px 0=
px 0px;" align=3D"left" valign=3D"top">

                    <=
table class=3D"twelve columns" style=3D"border-spacing: 0; border-collap=
se: collapse; vertical-align: top; text-align: left; width: 580px; margi=
n: 0 auto; padding: 0;"><tr style=3D"vertical-align: top; text-align: left=
; padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webk=
it-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: co=
llapse !important; vertical-align: top; text-align: left; padding: 0px 0=
px 10px;" align=3D"left" valign=3D"top">
                          <=
h1 style=3D"color: #222222; font-family: 'Helvetica', 'Arial', sans-serif;=
 font-weight: normal; text-align: left; line-height: 1.3; word-break: no=
rmal; font-size: 40px; margin: 0; padding: 0;" align=3D"left">Welcome, Dan=
eel Olivan</h1>
                          <p style=3D"color: #22222=
2; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; t=
ext-align: left; line-height: 19px; font-size: 14px; margin: 0; padding:=
 0 0 10px;" align=3D"left">Lorem ipsum dolor sit amet, consectetur adipisi=
cing elit, sed do eiusmod tempor incididunt ut labore et.</p>
      =
                    <img width=3D"580" height=3D"300" src=3D"http://placeh=
old.it/580x300" style=3D"outline: none; text-decoration: none; -ms-interpo=
lation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: =
both; display: block;" align=3D"left" /></td>
                     =
   <td class=3D"expander" style=3D"word-break: break-word; -webkit-hyphe=
ns: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !=
important; vertical-align: top; text-align: left; visibility: hidden; wi=
dth: 0px; padding: 0;" align=3D"left" valign=3D"top"></td>
         =
             </tr></table><table class=3D"twelve columns" style=3D"borde=
r-spacing: 0; border-collapse: collapse; vertical-align: top; text-align=
: left; width: 580px; margin: 0 auto; padding: 0;"><tr style=3D"vertical-a=
lign: top; text-align: left; padding: 0;" align=3D"left"><td class=3D"pa=
nel" style=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphens:=
 auto; hyphens: auto; border-collapse: collapse !important; vertical-ali=
gn: top; text-align: left; background: #f2f2f2; padding: 10px; border: 1=
px solid #d9d9d9;" align=3D"left" bgcolor=3D"#f2f2f2" valign=3D"to=
p">
                          <p style=3D"color: #222222; font-fami=
ly: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: l=
eft; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" =
align=3D"left">Phasellus dictum sapien a neque luctus cursus. Pellentesque=
 sem dolor, fringilla et pharetra vitae. <a href=3D"#" style=3D"color: #=
2ba6cb; text-decoration: none;">Click it! =C2=BB</a></p>
             =
           </td>
                        <td class=3D"expander" st=
yle=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; =
hyphens: auto; border-collapse: collapse !important; vertical-align: top=
; text-align: left; visibility: hidden; width: 0px; padding: 0;" align=3D"=
left" valign=3D"top"></td>
                      </tr></table></td=
>
                </tr></table><br /><table class=3D"row" style=3D"b=
order-spacing: 0; border-collapse: collapse; vertical-align: top; text-a=
lign: left; width: 100%; position: relative; display: block; padding: 0p=
x;"><tr style=3D"vertical-align: top; text-align: left; padding: 0;" align=
=3D"left"><td class=3D"wrapper" style=3D"word-break: break-word; -webkit-h=
yphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collap=
se !important; vertical-align: top; text-align: left; position: relative=
; padding: 10px 20px 0px 0px;" align=3D"left" valign=3D"top">

 =
                   <table class=3D"six columns" style=3D"border-spacing:=
 0; border-collapse: collapse; vertical-align: top; text-align: left; wi=
dth: 280px; margin: 0 auto; padding: 0;"><tr style=3D"vertical-align: top;=
 text-align: left; padding: 0;" align=3D"left"><td style=3D"word-break: =
break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; bo=
rder-collapse: collapse !important; vertical-align: top; text-align: lef=
t; padding: 0px 0px 10px;" align=3D"left" valign=3D"top">
          =
               =20
                          <p style=3D"color: #222222;=
 font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; tex=
t-align: left; line-height: 19px; font-size: 14px; margin: 0; padding: 0=
 0 10px;" align=3D"left">Lorem ipsum dolor sit amet, consectetur adipisici=
ng elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolo=
r sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididu=
nt ut labore et. Lorem ipsum dolor sit amet.</p>

              =
            <p style=3D"color: #222222; font-family: 'Helvetica', 'Arial',=
 sans-serif; font-weight: normal; text-align: left; line-height: 19px; f=
ont-size: 14px; margin: 0; padding: 0 0 10px;" align=3D"left">Lorem ipsum =
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci=
didunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing=
 elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor =
sit amet.</p>

                          <table class=3D"butto=
n" style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: =
top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr s=
tyle=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"lef=
t"><td style=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphen=
s: auto; hyphens: auto; border-collapse: collapse !important; vertical-a=
lign: top; text-align: center; display: block; width: auto !important; c=
olor: #ffffff; background: #2ba6cb; padding: 8px 0; border: 1px solid #2=
284a1;" align=3D"center" bgcolor=3D"#2ba6cb" valign=3D"top">
         =
                       <a href=3D"#" style=3D"color: #ffffff; text-decor=
ation: none; font-weight: bold; font-family: Helvetica, Arial, sans-seri=
f; font-size: 16px;">Click Me!</a>
                              </t=
d>
                            </tr></table></td>
              =
          <td class=3D"expander" style=3D"word-break: break-word; -webki=
t-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: col=
lapse !important; vertical-align: top; text-align: left; visibility: hid=
den; width: 0px; padding: 0;" align=3D"left" valign=3D"top"></td>
  =
                    </tr></table></td>
                  <td class=3D"=
wrapper last" style=3D"word-break: break-word; -webkit-hyphens: auto; -moz=
-hyphens: auto; hyphens: auto; border-collapse: collapse !important; ver=
tical-align: top; text-align: left; position: relative; padding: 10px 0p=
x 0px;" align=3D"left" valign=3D"top">

                    <tabl=
e class=3D"six columns" style=3D"border-spacing: 0; border-collapse: col=
lapse; vertical-align: top; text-align: left; width: 280px; margin: 0 au=
to; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; paddi=
ng: 0;" align=3D"left"><td class=3D"panel" style=3D"word-break: break-word=
; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-colla=
pse: collapse !important; vertical-align: top; text-align: left; backgro=
und: #f2f2f2; padding: 10px; border: 1px solid #d9d9d9;" align=3D"left" bg=
color=3D"#f2f2f2" valign=3D"top">
                          <h6 styl=
e=3D"color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-w=
eight: normal; text-align: left; line-height: 1.3; word-break: normal; f=
ont-size: 20px; margin: 0; padding: 0;" align=3D"left">Header Thing</h=
6>
                          <p style=3D"color: #222222; font-family: =
'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: left;=
 line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" alig=
n=3D"left">Sub-head or something</p>
                          <table =
style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top=
; text-align: left; padding: 0;"><tr style=3D"vertical-align: top; text-al=
ign: left; padding: 0;" align=3D"left"><td style=3D"word-break: break-wo=
rd; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-col=
lapse: collapse !important; vertical-align: top; text-align: left; paddi=
ng: 0px 0px 10px;" align=3D"left" valign=3D"top">
                  =
                <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: =
none;">Just a Plain Link =C2=BB</a>
                                <=
/td>
                              </tr></table><hr style=3D"color: #d=
9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"=
border-spacing: 0; border-collapse: collapse; vertical-align: top; text-=
align: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: le=
ft; padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -we=
bkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: =
collapse !important; vertical-align: top; text-align: left; padding: 0px=
 0px 10px;" align=3D"left" valign=3D"top">
                         =
         <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">=
Just a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table><hr style=3D"color: #d9d9d=
9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; =
padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webkit=
-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: coll=
apse !important; vertical-align: top; text-align: left; padding: 0px 0px=
 10px;" align=3D"left" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">Just=
 a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table><hr style=3D"color: #d9d9d=
9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; =
padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webkit=
-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: coll=
apse !important; vertical-align: top; text-align: left; padding: 0px 0px=
 10px;" align=3D"left" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">Just=
 a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table><hr style=3D"color: #d9d9d=
9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; =
padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webkit=
-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: coll=
apse !important; vertical-align: top; text-align: left; padding: 0px 0px=
 10px;" align=3D"left" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">Just=
 a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table><hr style=3D"color: #d9d9d=
9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; =
padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webkit=
-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: coll=
apse !important; vertical-align: top; text-align: left; padding: 0px 0px=
 10px;" align=3D"left" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">Just=
 a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table><hr style=3D"color: #d9d9d=
9; height: 1px; background: #d9d9d9; border: none;" /><table style=3D"bord=
er-spacing: 0; border-collapse: collapse; vertical-align: top; text-alig=
n: left; padding: 0;"><tr style=3D"vertical-align: top; text-align: left; =
padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -webkit=
-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: coll=
apse !important; vertical-align: top; text-align: left; padding: 0px 0px=
 10px;" align=3D"left" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #2ba6cb; text-decoration: none;">Just=
 a Plain Link =C2=BB</a>
                                </td>=

                              </tr></table></td>
              =
          <td class=3D"expander" style=3D"word-break: break-word; -webki=
t-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: col=
lapse !important; vertical-align: top; text-align: left; visibility: hid=
den; width: 0px; padding: 0;" align=3D"left" valign=3D"top"></td>
  =
                    </tr></table><br /><table class=3D"six columns" st=
yle=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; =
text-align: left; width: 280px; margin: 0 auto; padding: 0;"><tr style=3D"=
vertical-align: top; text-align: left; padding: 0;" align=3D"left"><td cla=
ss=3D"panel" style=3D"word-break: break-word; -webkit-hyphens: auto; -mo=
z-hyphens: auto; hyphens: auto; border-collapse: collapse !important; ve=
rtical-align: top; text-align: left; background: #f2f2f2; padding: 10px;=
 border: 1px solid #d9d9d9;" align=3D"left" bgcolor=3D"#f2f2f2" valign=3D"=
top">
                          <h6 style=3D"color: #222222; font-fami=
ly: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: l=
eft; line-height: 1.3; word-break: normal; font-size: 20px; margin: 0 0 =
5px; padding: 0;" align=3D"left">Connect With Us:</h6>
               =
           <table class=3D"tiny-button facebook" style=3D"border-spacing=
: 0; border-collapse: collapse; vertical-align: top; text-align: left; w=
idth: 100%; overflow: hidden; padding: 0;"><tr style=3D"vertical-align: to=
p; text-align: left; padding: 0;" align=3D"left"><td style=3D"word-break=
: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; =
border-collapse: collapse !important; vertical-align: top; text-align: c=
enter; display: block; width: auto !important; color: #ffffff; backgroun=
d: #3b5998; padding: 5px 0 4px; border: 1px solid #2d4473;" align=3D"cente=
r" bgcolor=3D"#3b5998" valign=3D"top">
                             =
     <a href=3D"#" style=3D"color: #ffffff; text-decoration: none; font-=
weight: normal; font-family: Helvetica, Arial, sans-serif; font-size: 12=
px;">Facebook</a>
                                </td>
         =
                     </tr></table><hr style=3D"color: #d9d9d9; height: 1px=
; background: #d9d9d9; border: none;" /><table class=3D"tiny-button twitte=
r" style=3D"border-spacing: 0; border-collapse: collapse; vertical-align: =
top; text-align: left; width: 100%; overflow: hidden; padding: 0;"><tr s=
tyle=3D"vertical-align: top; text-align: left; padding: 0;" align=3D"lef=
t"><td style=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphen=
s: auto; hyphens: auto; border-collapse: collapse !important; vertical-a=
lign: top; text-align: center; display: block; width: auto !important; c=
olor: #ffffff; background: #00acee; padding: 5px 0 4px; border: 1px soli=
d #0087bb;" align=3D"center" bgcolor=3D"#00acee" valign=3D"top">
     =
                             <a href=3D"#" style=3D"color: #ffffff; text=
-decoration: none; font-weight: normal; font-family: Helvetica, Arial, s=
ans-serif; font-size: 12px;">Twitter</a>
                           =
     </td>
                              </tr></table><hr style=3D"col=
or: #d9d9d9; height: 1px; background: #d9d9d9; border: none;" /><table c=
lass=3D"tiny-button google-plus" style=3D"border-spacing: 0; border-coll=
apse: collapse; vertical-align: top; text-align: left; width: 100%; over=
flow: hidden; padding: 0;"><tr style=3D"vertical-align: top; text-align: l=
eft; padding: 0;" align=3D"left"><td style=3D"word-break: break-word; -w=
ebkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse:=
 collapse !important; vertical-align: top; text-align: center; display: =
block; width: auto !important; color: #ffffff; background: #DB4A39; padd=
ing: 5px 0 4px; border: 1px solid #cc0000;" align=3D"center" bgcolor=3D"=
#DB4A39" valign=3D"top">
                                  <a href=
=3D"#" style=3D"color: #ffffff; text-decoration: none; font-weight: norm=
al; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">Google =
+</a>
                                </td>
                     =
         </tr></table><br /><h6 style=3D"color: #222222; font-family: 'Hel=
vetica', 'Arial', sans-serif; font-weight: normal; text-align: left; lin=
e-height: 1.3; word-break: normal; font-size: 20px; margin: 0 0 5px; pad=
ding: 0;" align=3D"left">Contact Info:</h6>
                          =
<p style=3D"color: #222222; font-family: 'Helvetica', 'Arial', sans-serif;=
 font-weight: normal; text-align: left; line-height: 19px; font-size: 14=
px; margin: 0; padding: 0 0 10px;" align=3D"left">Phone: <b>408.341.0600</=
b></p>
                          <p style=3D"color: #222222; font-fami=
ly: 'Helvetica', 'Arial', sans-serif; font-weight: normal; text-align: l=
eft; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0 10px;" =
align=3D"left">Email: <a href=3D"mailto:hseldon@trantor.com" style=3D"colo=
r: #2ba6cb; text-decoration: none;">hseldon@trantor.com</a></p>
     =
                   </td>
                        <td class=3D"expander=
" style=3D"word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: au=
to; hyphens: auto; border-collapse: collapse !important; vertical-align:=
 top; text-align: left; visibility: hidden; width: 0px; padding: 0;" ali=
gn=3D"left" valign=3D"top"></td>
                      </tr></table>=
</td>
                </tr></table><br /><br /><table class=3D"row" st=
yle=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; =
text-align: left; width: 100%; position: relative; display: block; paddi=
ng: 0px;"><tr style=3D"vertical-align: top; text-align: left; padding: 0;"=
 align=3D"left"><td class=3D"wrapper last" style=3D"word-break: break-word=
; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-colla=
pse: collapse !important; vertical-align: top; text-align: left; positio=
n: relative; padding: 10px 0px 0px;" align=3D"left" valign=3D"top">
 =
        =20
                    <table class=3D"twelve columns" styl=
e=3D"border-spacing: 0; border-collapse: collapse; vertical-align: top; te=
xt-align: left; width: 580px; margin: 0 auto; padding: 0;"><tr style=3D"ve=
rtical-align: top; text-align: left; padding: 0;" align=3D"left"><td align=
=3D"center" style=3D"word-break: break-word; -webkit-hyphens: auto; -moz=
-hyphens: auto; hyphens: auto; border-collapse: collapse !important; ver=
tical-align: top; text-align: left; padding: 0px 0px 10px;" valign=3D"top"=
>
                         =20
                            <p styl=
e=3D"text-align: center; color: #222222; font-family: 'Helvetica', 'Arial'=
, sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; m=
argin: 0; padding: 0 0 10px;" align=3D"center"><a href=3D"#" style=3D"colo=
r: #2ba6cb; text-decoration: none;">Terms</a> | <a href=3D"#" style=3D"c=
olor: #2ba6cb; text-decoration: none;">Privacy</a> | <a href=3D"#" sty=
le=3D"color: #2ba6cb; text-decoration: none;">Unsubscribe</a></p>
 =
                        =20
                        </td>
         =
               <td class=3D"expander" style=3D"word-break: break-word; -=
webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse=
: collapse !important; vertical-align: top; text-align: left; visibility=
: hidden; width: 0px; padding: 0;" align=3D"left" valign=3D"top"></t=
d>
                      </tr></table></td>
                </tr>=
</table></td>
            </tr></table>
      </td>
    <=
/tr></table>
thedeerchild commented 10 years ago

I decoded the mail source and it rendered pretty badly in Chrome until I added back in the <head>, at which point it rendered fine. I'm not sure if Thunderbird removed the <head> section or if it was removed at some other point in the process. Can you try a different sender to see if it's an issue with Contao?

hagerhink commented 10 years ago

I had the same problem using Safari to "share" the html via mail, but it worked fine when sending the mail using C#'s SmtpClient.

mmerriweather commented 10 years ago

@elm232 The emails routed through Outlook Web App, and the Exchange server have rendering issues. I can link to an exchange server later this week or next week.

dreadpiratebrown commented 10 years ago

I am having the same problem sending this email through Exact Target. It looks flawless in Outlook and in GMail, but it looks awful on my iPhone.

JayHoltslander commented 10 years ago

Even adding min-width:100% !important; for body and .body (inline) to the resulting code which was run through the ink inliner doesn't resolve this issue. (Basic template v1.0.4)

Speaking of 100%.. ...that's how useless Ink is without this issue being resolved. :-/ (Sorry to be harsh. But seriously.)

JayHoltslander commented 10 years ago

This seems to be a partial fix. Remove: table-layout: fixed !important in media queries. But this breaks the responsive widths for stuff which kind of defeats the purpose.

dreadpiratebrown commented 10 years ago

After some back and forth with the Ink guy at Zurb, he was able to determine that the problem with Exact Target is that they strip the doctype when the email is sent, and the Ink framework is dependent on a doctype. So if you're using Exact Target to send your emails, Ink isn't going to cut it for now.

thedeerchild commented 10 years ago

This does appear to be related to the doctype declaration being removed by the sender (Contacto, Exact Target and direct share from Safari have been mentioned in the thread as offenders). I'm going to mark this as closed for now and add something to the docs warning about the doctype being a common point of failure.

If anybody is still having problems that appear to not be doctype related, please feel free to re-open the issue, open a new one or email me directly at ink@zurb.com.

Sorry that this currently seems to be an issue with a number of the smaller enterprise ESPs. Hopefully the consumer ESPs like Campaign Monitor and Mailchimp force them to step up their game.