Menu
I have a problem with e-mail clients reverting my styled <hr/> to one with just a solid line.
The following is my mark-up, looks fine in Chrome and IE but Outlook always reverts the dotted line to a solid one.
<hr style="background:none; border:dotted 1px #999999; border-width:1px 0 0 0; height:0; width:100%; margin:0px 0px 0px 0px; padding-top:10px;padding-bottom:10px;" ></hr>
I have looked at Campaign Monitor but nothing particular to guide me there.
All answers appreciated.
201
Its simple to add a horizontal line in your markup, just add: <hr>. Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Originally the HR element was styled using attributes.
We can also design the hr (horizontal-rule) tag to create attractive user-interface. In this tutorial, we are going to design different and styling hr tag, using images and text. It's simple and easy to use where each style code is different from other style. You can also refer live demo or download the Script file.
The width attribute on the hr element is obsolete. Use CSS instead. The noshade attribute on the hr element is obsolete. Use CSS instead.
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections.
I would imagine it's because outlook uses the Microsoft word rendering engine, rather than a HTML engine, and a hr tag would just get reverted to a solid line as in msword.
I'd probably try using a full width table->cell or div and style that instead of using an hr tag.
<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> nbsp is in there in case the rendering engine doesn't recognise empty cells.
91
Based on the other answers, I found this to work best:
<table border="0" width="100%" cellpadding="0" cellspacing="0"> <tr> <td style="background:none; border-bottom: 1px solid #d7dfe3; height:1px; width:100%; margin:0px 0px 0px 0px;"> </td> </tr> </table> <br>The width seems to be needed on table in % or preferrably (as per https://www.campaignmonitor.com/resources/will-it-work/guidelines/) set it in px on the td if possible.
The border-bottom shorthand seems to work fine, where the longhand versions as mentioned in kolin's answer don't in Outlook.
EDIT: What I found to have used previously and also works, at least in Outlook (would be nice if anyone who can, could test that in other clients), is a <hr>based approach.
<hr height="1" style="height:1px; border:0 none; color: #D7DFE3; background-color: #D7DFE3; margin-top:1.5em; margin-bottom:1.5em;"> Rather inelegant and only useful for a known fixed width but I'm finding that these are the terrors visited upon you when trying to fix formatting in html emails'.
<p style="line-height:20%; color:#cccccc; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;">........................................................................................................................................</p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With