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.77k stars 1.09k forks source link

Class style overrides element style #847

Open wgordon17 opened 6 years ago

wgordon17 commented 6 years ago

How can we reproduce this bug?

Write out the HTML (or Inky code) that causes the issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<title>*|SUBJECT|*</title>
<style type="text/css" data-premailer="ignore">
  #outlook a{
    padding: 0;
  }
  body{
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    font-weight: 400;
    margin: 0;
    padding: 0;
  }
  .ReadMsgBody{
    width: 100%;
  }
  .ExternalClass{
    width: 100%;
  }
  img {
    border: 0;
    max-width: 100%;
    height: auto;
    outline: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-decoration: none;
    line-height: 100%;
  }
  #backgroundTable{
    height: 100% !important;
    margin: 0;
    padding: 0;
    width: 100% !important;
  }
</style>
<style type="text/css">
  /**
   * Generic
   */
  .main {
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0;
  }
  .main .main-td {
    padding: 40px 60px;
    border: 1px solid #dddddd;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    border-radius: 2px;
  }
  table {
    border-spacing: 0;
    border-collapse: separate;
    table-layout: fixed;
  }
  td {
    font-size: 16px;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
  }
  a {
    border: none;
    outline: none !important;
  }

  /**
   * Header
   */
  .header td img {
    padding: 15px 0 30px;
    text-align: left;
  }
  .header .logo {
    text-align: left;
  }

  /**
   * Content
   */
  .content-td {
    font-size: 15px;
    line-height: 22px;
    padding: 0;
    color: #525252;
  }
  .content-td > :first-child {
    margin-top: 0;
  }
  .content-td h1 {
    font-size: 26px;
    line-height: 33px;
    color: #282F33;
    margin-bottom: 7px;
    margin-top: 30px;
    font-weight: normal;
  }
  .content-td h2 {
    font-size: 18px;
    font-weight: bold;
    color: #282F33;
    margin-top: 30px;
    margin-bottom: 7px;
  }
  .content-td h1 + h2 {
    margin-top: 0px !important;
  }
  .content-td h2 + h1 {
    margin-top: 0px !important;
  }
  .content-td h3 ,
  .content-td h4 ,
  .content-td h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .content-td p {
    margin: 0 0 17px 0;
    line-height: 1.5;
  }
  .content-td p img,
  .content-td h1 img,
  .content-td h2 img,
  .content-td li img,
  .content-td .intercom-h2b-button img {
    margin: 0;
    padding: 0;
  }
  .content-td p.intro {
    font-size: 20px;
    line-height: 30px;
  }
  .content-td blockquote {
    margin: 40px 0;
    font-style: italic;
    color: #8C8C8C;
    font-size: 18px;
    text-align: center;
    padding: 0 30px;
    font-family: Georgia, sans-serif;
    quotes: none;
  }
  .content-td blockquote a {
    color: #8C8C8C;
  }
  .content-td ul {
    list-style: disc;
    margin: 0 0 20px 40px;
    padding: 0;
  }
  .content-td ol {
    list-style: decimal;
    margin: 0 0 20px 40px;
    padding: 0;
  }
  .content-td img {
    max-width: 100%;
    margin: 17px 0;
  }
  .content-td .intercom-container {
    margin-bottom: 16px;
  }
  .content-td hr {
    border: none;
    border-top: 1px solid #DDD;
    margin: 20px 10% 20px 10%;
  }
  .content-td table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
  }
  .content-td td,
  .content-td th {
    padding: 5px 7px;
    border: 1px solid #DADADA;
    text-align: left;
    vertical-align: top;
  }
  .content-td th {
    font-weight: bold;
    background: #F6F6F6;
  }
  .content-td a {
    color: #1251BA;
  }
  .content td.content-td table.intercom-container {
    margin: 17px 0;
  }
  .content td.content-td table.intercom-container.intercom-align-center {
    margin-left: auto;
    margin-right: auto;
  }
  .content td.content-td table.intercom-container td {
    background-color: #cc0000;
    padding: 12px 35px;
    border-radius: 3px;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    border: none;
  }
  .content td.content-td table.intercom-container .intercom-h2b-button {
    display: inline-block;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    background-color: #cc0000;
    border: none !important;
    border-radius: 3px;
  }
  .footer-td {
    text-align: center;
    padding: 21px 30px 15px;
  }
  .footer-td p ,
  .footer-td a {
    font-size: 12px;
    color: #b7b7b7;
    text-decoration: none;
    font-weight: 300;
  }
  .footer-td p {
    margin: 0 0 6px 0;
  }
  .footer-td p.address {
    margin-top: 9px;
    line-height: 1.5em;
  }
  .footer-td p.powered-by {
    margin-top: 18px;
  }
  .footer-td p.unsub {
    margin: 0;
  }
  .footer .unsub a {
    text-decoration: underline;
    display: block;
    margin: 12px 0 0;
  }
  p.unsub a {
    text-decoration: underline;
  }
  .footer-td p.powered-by a {
    font-weight: bold;
  }
  .footer-td textarea {
    text-decoration: none;
    font-size: 12px;
    color: #b7b7b7;
    font-family: Helvetica, Arial, sans-serif;
    padding: 9px 0;
    font-weight: 300;
    line-height: normal;

  }
  a.intercom-h2b-button {
    background-color: #cc0000;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    border-radius: 3px;
    display: inline-block;
    text-decoration: none;
  }
</style>

<style type="text/css" data-premailer="ignore">
  @media screen and (max-width: 595px) {
    body {
      padding: 10px !important;
    }
    .main {
      width: 100% !important;
    }
    .main .main-td {
      padding: 20px !important;
    }
    .header td {
      text-align: center;
    }
  }
  .content-td blockquote + * {
    margin-top: 20px !important;
  }
  .ExternalClass .content-td h1 {
    padding: 20px 0 !important;
  }
  .ExternalClass .content-td h2 {
    padding: 0 0 5px !important;
  }
  .ExternalClass .content-td p {
    padding: 10px 0 !important;
  }
  .ExternalClass .content-td .intercom-container {
    padding: 5px 0 !important;
  }
  .ExternalClass .content-td hr + * {
    padding-top: 30px !important;
  }
  .ExternalClass .content-td ol ,
  .ExternalClass .content-td ul {
    padding: 0 0 20px 40px !important;
    margin: 0 !important;
  }
  .ExternalClass .content-td ol li,
  .ExternalClass .content-td ul li {
    padding: 3px 0 !important;
    margin: 0 !important;
  }
  .ExternalClass table .footer-td p {
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
  }
  .ExternalClass table .footer-td p.powered-by,
  .ExternalClass table .footer-td p.unsub {
    padding-top: 15px;
  }
</style>

<style type="text/css">
  .intercom-align-right {
  text-align: right !important;
}
.intercom-align-center {
  text-align: center !important;
}
.intercom-align-left {
  text-align: left !important;
}
/* Over-ride for RTL */
.right-to-left .intercom-align-right{
  text-align: left !important;
}
.right-to-left .intercom-align-left{
  text-align: right !important;
}
.right-to-left .intercom-align-left {
  text-align:right !important;
}
.right-to-left li {
  text-align:right !important;
  direction: rtl;
}
.right-to-left .intercom-align-left img,
.right-to-left .intercom-align-left .intercom-h2b-button {
  margin-left: 0 !important;
}
.intercom-attachment,
.intercom-attachments,
.intercom-attachments td,
.intercom-attachments th,
.intercom-attachments tr,
.intercom-attachments tbody,
.intercom-attachments .icon,
.intercom-attachments .icon img {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.intercom-attachments {
  margin: 10px 0 !important;
}
.intercom-attachments .icon,
.intercom-attachments .icon img {
  width: 16px !important;
  height: 16px !important;
}
.intercom-attachments .icon {
  padding-right: 5px !important;
}
.intercom-attachment {
  display: inline-block !important;
  margin-bottom: 5px !important;
}
.intercom-interblocks-content-card {
  width: 334px;
  max-height: 136px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px;
  font-size: 16px;
  border: 1px solid #e0e0e0;
}
.intercom-interblocks-article-icon {
  width: 22.5%;
  height: 136px;
  float: left;
  background-color: #fafafa;
  background-image: url('https://static.intercom-mail.com/assets/article_book-1a595be287f73c0d02f548f513bfc831.png');
  background-repeat: no-repeat;
  background-size: 32px;
  background-position: center;
}
.intercom-interblocks-article-text {
  width: 77.5%;
  float: right;
  background-color: #fff;
}
.intercom-interblocks-article-title {
  color: #455a64;
  height: 40px;
  margin: 10px 15px;
  line-height: 1.3;
  font-weight: bold;
  overflow: hidden;
}
.intercom-interblocks-article-body {
  color: #74848b;
  height: 30px;
  margin: 10px 15px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
}
.intercom-interblocks-article-author {
  margin: 10px 15px;
  height: 24px;
  line-height: normal;
}

.intercom-interblocks-article-author-avatar {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

img.intercom-interblocks-article-author-avatar-image {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0;
  vertical-align: top;
}

.intercom-interblocks-article-author-name {
  color: #74848b;
  line-height: 1.2;
  margin: 0 0 0 5px;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  vertical-align: middle;
}
</style>
</head>

<body style="background: #f9f9f9; margin: 0px; padding: 20px" bgcolor="f9f9f9">
  <table cellspacing="0" border="0" cellpadding="0" align="center" width="595" bgcolor="white" class="main" style="border-collapse: separate; border-spacing: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: 0; table-layout: fixed;">
    <tr>
      <td class="main-td" style="border: 1px solid #dddddd; border-radius: 2px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 40px 60px">
  <table width="100%" class="header" style="border-collapse: separate; border-spacing: 0; table-layout: fixed">
    <tr>
      <td class="logo" style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 0; text-align: left" align="left">
          <img src="http://via.placeholder.com/165x88" width="165" height="43" class="featured" style="padding: 15px 0 30px; text-align: left">
      </td>
    </tr>
  </table>
        <table width="100%" class="content" style="border-collapse: separate; border-spacing: 0; table-layout: fixed">
          <tr>
            <td class="content-td" style="color: #525252; font-family: Helvetica, Arial, sans-serif; font-size: 15px; line-height: 22px; padding: 0">
                <table class="intercom-container intercom-align-center" style="margin: 25px auto;"><tbody><tr>
                  <td align="left" style="padding: 15px;" bgcolor="#cc0000" valign="top"><a class="intercom-h2b-button" href="https://example.com/" style="font-weight: bold; font-size: 18px;">Button</a></td>
                </tr></tbody></table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <table width="100%" class="footer" align="middle" style="border-collapse: separate; border-spacing: 0; table-layout: fixed">
    <tr>
      <td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 0">
        <table cellspacing="0" border="0" cellpadding="0" align="center" width="600" bgcolor="transparent" class="main" style="border-collapse: separate; border-spacing: 0; font-family: Helvetica, Arial, sans-serif; letter-spacing: 0; table-layout: fixed">
          <tr>
            <td class="footer-td" style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; padding: 21px 30px 15px; text-align: center" align="center">
                <p style="color: #b7b7b7; font-size: 12px; font-weight: 300; margin: 0 0 6px; text-decoration: none">123 USA St</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

What did you expect to happen?

This block has margin: 25px auto specified on the element, even though .content-td .intercom-container has a margin-bottom: 16px specified. The margin-bottom: 16px should have not made it into the compiled code since it's overriden on the element.

<table class="intercom-container intercom-align-center" style="margin: 25px auto;"><tbody><tr>
                  <td align="left" style="padding: 15px;" bgcolor="#cc0000" valign="top"><a class="intercom-h2b-button" href="https://example.com/" style="font-weight: bold; font-size: 18px;">Button</a></td>
                </tr></tbody></table>

What happened instead?

margin: 25px auto and margin-bottom: 16px both got applied to the element, and margin-bottom: 16px overrode the margin.

What email clients does this happen in? All

nikitasol commented 6 years ago

Basically, the problem is that the declaration that you pass within the style attribute is more generic (I think), than those declared on your stylesheet. For example, if you change margin: 25px auto to margin-top: 25px; margin-bottom: 25px; margin-left: auto; margin-right: auto; you won't have any problem and those specific declarations won't make it into the final code.

wgordon17 commented 6 years ago

I would normally agree with you, however this worked as I had outlined above in v1 of the inliner. So this seems more like a regression as opposed to expected behavior.

wgordon17 commented 6 years ago

I would provide comparison output, but v1 of the online inliner is returning Failed to load https://zurb.com/ink/skate-proxy.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://foundation.zurb.com' is therefore not allowed access. The response had HTTP status code 403. when converting an email.

nikitasol commented 6 years ago

Unfortunately I haven't had any experience with v1, but I agree, though at the same time I can understand the thinking behind this feature (though it might be just a bug). Foundation, from the looks of it, inlines everything overwriting any exact declarations with those that have higher specificity. Now what happens with shorthand declarations when confronted by their elements. Let's reverse your example: margin: 25px auto in stylesheet and margin-top: 16px in the style attribute. In order for what you are proposing to work Foundation would have to break down the shorthand into 4 elements and rewrite the top element which would leave 4 elements inside, thus increasing the newsletter body. I would prefer smaller code and being more specific when I need to overwrite something. Though maybe foundation has the feature and the complier can break down the shorthand and then reconstruct it again (trying to keep the html as short as possible). And it just isn't working. 🤷🏼‍♂️