29

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.

3
  • I've retagged Outlook, but is it a particular version of Outlook? 2007 onwards, perhaps? Apr 18, 2012 at 9:24
  • all e-mail clients really, but 2003 and 2007 are the one's I'm looking at. Apr 18, 2012 at 12:58
  • 1
    is outlook being even more evil than IE have always been for websites ? And is OUTLOOK 2013 even worst than all the previous versions ?!!!
    – Ben
    Jul 4, 2014 at 10:09

5 Answers 5

32

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;">&nbsp;</td>
</tr>
</table>

nbsp is in there in case the rendering engine doesn't recognise empty cells.

8
  • 1
    i also realise that this isn't probably the most elegant way to code it.
    – kolin
    Apr 18, 2012 at 9:27
  • 1
    Thanks Kolin, but it actually work. I;d tried the same technique to limited effect. I have added the solution below which is, in your own words, rather inelegant Apr 19, 2012 at 7:55
  • Don't bother with the hr tag unless you want the default colors and margins that Outlook/Word uses.
    – trevorc
    May 23, 2012 at 17:26
  • 2
    Everone complaining about elegance in html for emails misses the point that coding for email has nothing to do with computational nor mathematical thinking; also it tends to get rather really ugly. Oct 31, 2013 at 2:37
  • 3
    This worked great for me after setting border etc. to zero. <table border="0" width="100%" cellpadding="0" cellspacing="0"> Thanks!
    – Ender2050
    Aug 6, 2014 at 2:49
22

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;">&nbsp;</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;">
1
  • The <hr> approach works well on the GMail web client too, as well as latest Outlook desktop client as of 2020 (not sure of the version number these days). Jun 11, 2020 at 19:50
4

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>
3
  • 2
    I can't believe I'm having to use something like this to get dotted borders in outlook sigh
    – DGibbs
    Aug 7, 2013 at 15:01
  • The p tag isn't easy to control in all email clients, and several of them (outlook.com) don't recognize margin/padding on the p tag, so I don't suggest using this solution.
    – josh1978
    Nov 29, 2016 at 22:28
  • hahaha this made me laugh out loud. Good one. I'll give it a +1
    – Toskan
    Sep 9, 2019 at 20:37
3

You can use this example:

<div style="border-top: 1px dotted #999999;">&nbsp;</div>

It will only work against white background unfortunately

1
  • @dude this question is regarding Outlook email HTML parsing not mobile browsers.
    – CodeGems
    Apr 30, 2018 at 2:40
1

Need to declare a font-size, otherwise " " messes with the height.

 <tr><td style="background:none; border-bottom: 4px solid #DC1431; height:1px; width:100%; margin:0px 0px 0px 0px; font-size: 1px">&nbsp;</td></tr> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.