Html emails <hr/> styling issue
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.
Answer
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.