Foundation-emails: <hr /> not styling for Outlook (tested on 2013)

[davidhouweling]

How can we reproduce this bug?
Set $hr-border: 4px solid #a4a4a4 and use a <hr />.

You'll notice that it isn't styled in the browser.

What did you expect to happen?
A <hr /> to be styled in accordingly.

What happened instead?
The <hr /> is still a 1px black line.

What email clients does this happen in?
Outlook (tested on 2013)

Possible solution
Use Inky to replace <hr /> with something along the lines of...

<div class="hr">&nbsp;</div>

With the css of

.hr {
  background: #a4a4a4;
  font-size: 4px;
  line-height: 4px;
}

So basically you can still have the original variable, but just parse it and inject accordingly.

[rafibomb]

Does the style change when you inline it? Or is this client specific for Outlook?

[davidhouweling]

I set up a little gulp task which runs the build task so that it is inline, and then sends the result to an email address which I am using Outlook to view the content. So my results are based on the production ready markup. What I suggested above was merely what you would implement in the scss files.

[rafibomb]

Looks like Outlook has spotty support for styling on an HR element. It has been suggested over the years to do something like

<table>
  <tr>
    <td style="background:none; border:dotted 4px #a4a4a4; border-width:4px 0 0 0; height:4px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;">&nbsp;</td>
   </tr>
</table>

Perhaps we can use Inky to create a structure like this for <hr>'s that has the hr variables assigned to style it. Thoughts?

[rafibomb]

I don't love this solution though - we'd need to come up with an alternative tag for an <hr> which is ugly. Does anyone know of a bulletproof way to style <hr>'s in emails?

[iamsankalp]

@rafibomb I just came across this issue. This is what i'm using now-
<spacer size="1" class="hr"></spacer>

Spacer's to the rescue. Bulletproof to my tests so far on Litmus! What do you think?

[rafibomb]

@iamsankalp That is an interesting solution! I'd still like to explore a solution with CSS because most people will use a consistent <hr> style thought the email.

Can you see any reason we wouldn't want to create an Inky tag <hr> vs something custom like <h-rule> or <line> ?

[iamsankalp]

@rafibomb Yeah, this is just a workaround and people will need to define a background color for their .hr class as per my solution. <line> seems a nice semantic name. 👍

If we can get similar thing via Inky, that'd be great.

Just that I think, we can't really use <hr> in final compiled code since outlook treats them way differently.

Meanwhile what'd you suggest for controlling width of <spacer>. Context: let's say i have to give a separator of 40px width only. That too in center of the layout. How do i achieve that easily? Right now, I'm using columns alongside but obviously it's not fixed width.

Thanks,
Sankalp

[rafibomb]

@iamsankalp Ok <line> is nice, maybe <hline> naming is hard 😏

Re: the spacer - Are you looking to create horizontal spacing as well? I typically use columns or padding to do this. Can you share a visual or specific use case?

[iamsankalp]

@rafibomb thanks for getting back. Nope, just vertical spacing but the separator be a fixed width. Like in the image below (Small separator above download badges).

[rafibomb]

I see, so an <hr> but with a constrained width and centered?

[iamsankalp]

@rafibomb Right.

[rafibomb]

Hmm, I'm pretty sure some CSS can do this or ading it into some offset columns that are less than 12 columns wide. Tell me if I'm wrong!

We want the framework to handle common use cases and things that are a pain to do in email

[iamsankalp]

@rafibomb I figured using columns was fine with me for this. Thanks! :)

[axelson]

Hmm, I'm pretty sure some CSS can do this or ading it into some offset columns that are less than 12 columns wide. Tell me if I'm wrong!

But if we wanted to keep the overall grid at 12 columns then how would you make a offset column that is narrower than the 1 column? Or one that doesn't fall within the 12 columns?

[davidhouweling]

I think for what you're trying to solve, I would just use a div Ina row and give it a bottom border with a specified width (may also need   inside it for outlook.

Back to the original topic, I still think a solution which replaces

---

is better than creating a separate element as the intended purpose is to fix hr to work for all clients.

[rafibomb]

Looks like the PR @brandonbarringer added here solves it along with the CSS just committed!

You can follow it here: https://github.com/zurb/inky/pull/46

We'll close this as resolved pending merging https://github.com/zurb/inky/pull/46