-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<hr /> not styling for Outlook (tested on 2013) #396
Comments
Does the style change when you inline it? Or is this client specific for Outlook? |
I set up a little gulp task which runs the |
Looks like Outlook has spotty support for styling on an HR element. It has been suggested over the years to do something like
Perhaps we can use Inky to create a structure like this for |
I don't love this solution though - we'd need to come up with an alternative tag for an |
@rafibomb I just came across this issue. This is what i'm using now- Spacer's to the rescue. Bulletproof to my tests so far on Litmus! What do you think? |
@iamsankalp That is an interesting solution! I'd still like to explore a solution with CSS because most people will use a consistent Can you see any reason we wouldn't want to create an Inky tag |
@rafibomb Yeah, this is just a workaround and people will need to define a background color for their If we can get similar thing via Inky, that'd be great. Just that I think, we can't really use Meanwhile what'd you suggest for controlling width of Thanks, |
@iamsankalp Ok 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? |
@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). |
I see, so an |
@rafibomb Right. |
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 |
@rafibomb I figured using columns was fine with me for this. Thanks! :) |
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? |
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 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. |
Looks like the PR @brandonbarringer added here solves it along with the CSS just committed! You can follow it here: foundation/inky#46 We'll close this as resolved pending merging foundation/inky#46 |
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...With the css of
So basically you can still have the original variable, but just parse it and inject accordingly.
The text was updated successfully, but these errors were encountered: