Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Daniele Manca
Courses Plus Student 7,548 PointsHow to style hr tags for emails so that they would work in Outlook 2010, 2013
Hello,
I guess Fabio Carneiro would be the best person to answer this. I have been trying to style hr tags in a mailchimp template, however in outlook the hr elements do not have the color I assign to them, so I would like to know what is the best way to assign the color to the hr element in this case, so far I have been embedding the css property for this.
Please let me know, Thanks!
4 Answers
Lucas Santos
19,315 PointsI would just do inline CSS like this
<hr style="border:1px solid #F00;" />
Lucas Santos
19,315 PointsI have no idea why my code is not showing
Lucas Santos
19,315 Points<hr style="border:1px solid #F00;"/>
Daniele Manca
Courses Plus Student 7,548 PointsThanks Lucas, but I still cannot see your code, also I already tried to style the hr element with inline css, but when I view the email in Outlook, the color is not assigned, it takes a default grey color instead.
Jonas Mørkeby
3,530 PointsFYI the "Markdown Cheatsheet" beneath the comment box tells you how to paste code into the comments... :)
Jonas Mørkeby
3,530 PointsHi Daniele.
I found this on another forum: <table> <tr> <td style="background:none; border:solid 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td> </tr> </table>
Given that emails are most often build of tables, styling a td to look like an hr might actually work... I haven't been able to try it yet, but let me know if it works!
Jonas Mørkeby
3,530 PointsWow... It happened to me too :)
<table>
<tr>
<td style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:1px; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;"> </td>
</tr>
</table>
Just be aware that the line in this case is dotted... But you might want to have it in another color too.
And also remember the to make sure that the td is shown if the browser/client isn't able to read empty cells.
Lucas Santos
19,315 Points<hr style="border:1px solid #F00;"/> that's what I had written, thanks for the heads up Jonas. I see Outlook always gives the most problems but if that doesn't work I think Jonas is on to something.
Daniele Manca
Courses Plus Student 7,548 PointsThanks Lucas, I will try it tomorrow and let you know.
Fabio Carneiro
Treehouse Guest TeacherFabio Carneiro
Treehouse Guest TeacherHey Daniele,
Apologies for the late reply. Outlook has spotty support for styling on an HR element, so if you want something that renders consistently across clients, your best bet is to go with the method Jonas Mørkeby detailed: use a table with border styles, and make sure the table cell isn't empty.