Foundation-emails: [Typography] HR not styled

[frecklebit]

How can we reproduce this bug?

When using the <hr/> tag with Inky, it isn't styled.

What did you expect to happen?

Style

What happened instead?

No Styles

What email clients does this happen in?

All

[tmugford]

It seems that this is in a state of flux at the moment. Apparently Outlook 2013 has issues in styling <hr/>, and a soon to be merged PR for Inky aims to resolve this by creating a new <h-line/> component that will generate the necessary table mark-up required to re-create the visual appearance of an hr. In the meantime, a rather hasty commit was made that removed all of the styling for hr in favour of a table.hr class. It appears that the required mark-up to get a horizontal rule is now:

<table class="hr"><tr><th>&nbsp;</th></tr></table> 

Though this is working for me, it’s not a drop-in replacement for the hr styling that preceded it, as the $hr-margin variable no longer has any effect and $global-line-height creates a space above the line. I expect this can be resolved by forcing the line-height to 0 and setting the space above and below using padding values based on $hr-margin. Sadly I don’t have the time to test that right now, and it probably isn’t a good idea to submit a PR on this while we’re waiting for the aforementioned Inky PR to be merged anyway.

[chrisbloom7]

+1 for this. Just upgraded from 2.1.0 to 2.2.1. Lots of great fixes for sure, but was surprised to find that my $hr-width was no longer being applied anywhere, and that there was a new table.hr class but it wasn't documented how to use it, and standard <hr> weren't converted... Looking forward to this change. For now I'll force it in my own scss files

[chrisbloom7]

Here's my temp fix in the meantime, maybe it will help someone else:

# src/partials/hr.html
{{!-- Horizontal rule implementation is in flux as of 2.2.1 because of known issues with HR support in Outlook clients.
      This is a temp fix until https://github.com/zurb/foundation-emails/issues/496 and 
      https://github.com/zurb/inky/pull/60 are resloved and the new `<h-line>` component is available.
--}}
<table width="100%" height="1" class="hr-container">{{!-- This constrains the width of the mock hr while allowing us to have margins on either side, because otherwise Outlook forces the length of an HR to 100% plus margins --}}
  <tbody>
    <tr>
      <td class="hr-margin" width="30">&nbsp;</td>{{!-- force a margin on the left side. set the width to whatever your $global-gutter is --}}
      <td class="hr-middle">&nbsp;</td>{{!-- this will become the HR --}}
      <td class="hr-margin" width="30">&nbsp;</td>{{!-- force a margin on the right side. set the width to whatever your $global-gutter is --}}
    </tr>
  </tbody>
</table>
<spacer size="12"></spacer>{{!-- Outlook has problems with bottom margins on tables, so use spacers instead --}}

# src/assets/scss/partials/_hr.scss
table.hr-container {
  width: 100%;
  margin: 0;
  Margin: 0;

  td {
    line-height: 0;
    height: 0;
    border: 0;
    margin: 0;
    Margin: 0;
    padding: 0;

    &.hr-margin {
      width: $global-gutter; // specify width here too because some clients respect one over the other
      max-width: $global-gutter; // And here too, because Outlook
    }

    &.hr-middle {
      border-bottom: $hr-border;
    }
  }
}

# src/pages/whatever.html
{{> hr}}{{!-- Use the HR partial because normal HRs have rendering issues in Outlook --}}

[dogancelik]

Please fix

table.hr {
  width: 100%;
}

_table.hr_ doesn't use $hr-width variable in __typography.scss_.

[jsit]

Just seeing this issue now; I believe all of these problems are addressed in my recent PR #679. Please test if you're interested. Thanks!