Need to fix horizontal line in email signature - html

Question

I'm creating an email signature using CodeTwo Email signature from Office 365. It's nearly done, but I keep having issues with a horizontal line that's in the signature. I've tried multiple variations of CSS style elements to get it to work everywhere, but as of now, it shows up on mobile devices, but not desktop devices (it shows up as like an outline of the line on desktop). For the longest time, it worked on desktop but not mobile, but then when I changed something it flipped. I'm using an hr element for the line. Here's a segment of the code:
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="BORDER-TOP: 0px; HEIGHT: 3px; BORDER-RIGHT: 0px; WIDTH: 80%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left>
</TD></TR>
Does anyone know what combination of stylings I would need in my hr tag? Thanks

Answer 1

Instead of the <hr> try using a <div> with a border-bottom of the required size:
<div style="border-bottom: 3px solid #213e64;"></div>
Example
<table style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" vAlign=top>
<strong>{First name} {Last name}</strong>
</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" vAlign=top>{Title}</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<div style="border-bottom: 3px solid #213e64;"></div>
</td>
</tr>
</tbody>
</table>

Answer 2

You forgot to close the HR tag and have some styles that are not needed, try this
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="HEIGHT: 3px; WIDTH: 80%; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left />
</TD></TR>
</TBODY>
</TABLE>