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.

Andrew Leach
  • 12,945
  • 1
  • 40
  • 47
El Toro Bauldo
  • 1,199
  • 3
  • 16
  • 26

5 Answers5

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.

kolin
  • 2,326
  • 1
  • 28
  • 46
  • 1
    i also realise that this isn't probably the most elegant way to code it. – kolin Apr 18 '12 at 09: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 – El Toro Bauldo Apr 19 '12 at 07:55
  • Don't bother with the hr tag unless you want the default colors and margins that Outlook/Word uses. – trevorc May 23 '12 at 17:26
  • This is the only `
    ` alternative i've found to work in all clients.     – zazzyzeph Sep 18 '13 at 15:16
  • 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. – Stephan Kristyn Oct 31 '13 at 02:37
  • 3
    This worked great for me after setting border etc. to zero. Thanks!
     – Ender2050 Aug 06 '14 at 02:49
  • This gives me a box of 1-2 line heights, surrounded by a dotted line in Outlook 2010 / Win7 (probably other Outlook versions, too). :( – marc82ch Mar 18 '15 at 09:14
  • @SirBenBenji what exactly is the point? Just because it *can* get ugly doesn't mean we shouldn't strive to make it as clear as we can. – Owain Reed Mar 23 '15 at 11:54
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;">
marc82ch
  • 1,004
  • 3
  • 11
  • 27
  • The
    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).     – Martin Connell Jun 11 '20 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>
El Toro Bauldo
  • 1,199
  • 3
  • 16
  • 26
  • 2
    I can't believe I'm having to use something like this to get dotted borders in outlook *sigh* – DGibbs Aug 07 '13 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 '16 at 22:28
  • hahaha this made me laugh out loud. Good one. I'll give it a +1 – Toskan Sep 09 '19 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

CodeGems
  • 549
  • 4
  • 16
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>
Brian Miller
  • 11
  • 1