Html emails <hr/> styling issue

24
votes

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.

5
htmlemailoutlookstyles
I've retagged Outlook, but is it a particular version of Outlook? 2007 onwards, perhaps? - Andrew Leach
all e-mail clients really, but 2003 and 2007 are the one's I'm looking at. - El Toro Bauldo
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

5 Answers

28
votes

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.

18
votes

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;">
3
votes

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
votes

You can use this example:

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

It will only work against white background unfortunately

0
votes

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>