-2

Email Signature getting distorted (on my end at least) when replying to an email that I sent. We are using Thunderbird as the email software.

The code looks fine when I first compose an email.

I am using span tag because p tag was creating unnecessary vertical spacing.

I am also using the div tag to create vertical spacing and control the height.

I would really appreciate a solution to stop the email signature from getting distorted.

Please find my code below and the distorted signature attached,

<span style="font-family:Verdana; font-size:14px; font-style:Italic; color:#F57C00;"><b>Gavin Charitar</b></span>
<div style="display: block;margin-top: 10px"></div>
<span style="font-family:Verdana; font-size:13px; color:#00000;">Business Development Representative<br /></span>
<div style="display: block;margin-top: 0px"></div>
<a href="https://deboertool.com">
  <img moz-do-not-send="true" alt="web" src="https://deboertool.com/images/email-logo.jpg" height="75" width="255">
</a>
<div style="display: block;margin-top: -8px"></div>
<span style="font-family:Verdana; font-size:11px;line-height:1.55"> 336 Watline Avenue<br/>
Mississauga, ON<br />
L4Z1X2 Canada
</span>
<div style="display: block;margin-top: 9px"></div>
<span style="color:#696969; margin: normal; line-height:1.65; font-family:Verdana; font-size:11px">Phone: <span style="color:#000000; font-family:Verdana; font-size:11px"> 905-361-4303<br /><span style="color:#696969; font-family:Verdana; font-size:11px">Toll-free: <span style="color:#000000; font-family:Verdana; font-size:11px"> 1-888-4-De-Boer<br /><span style="color:#696969; font-family:Verdana; font-size:11px">Web: <a href="https://deboertool.com"><span style="color:#000000; font-family:Verdana; font-size:11px">www.deboertool.com</a><br /><span style="color:#696969; font-family:Verdana; font-size:11px">Email: <a href="mailto:[email protected]"><span style="color:#000000; font-family:Verdana; font-size:11px">[email protected]</span></a><br
/><br />

enter image description here

2
  • Use <span>s for inline content and <div>s for block content that (by default) takes up the full width of it's parent.
    – phuzi
    Commented Jul 8 at 15:01
  • It looks like something is removing the empty <div>s
    – phuzi
    Commented Jul 8 at 15:02

1 Answer 1

Reset to default
0

I can replicate what you're seeing by removing the empty <div> tags:

<span style="font-family:Verdana; font-size:14px; font-style:Italic; color:#F57C00;"><b>Gavin Charitar</b></span>
<span style="font-family:Verdana; font-size:13px; color:#00000;">Business Development Representative<br /></span>
<a href="https://deboertool.com">
  <img moz-do-not-send="true" alt="web" src="https://deboertool.com/images/email-logo.jpg" height="75" width="255">
</a>
<span style="font-family:Verdana; font-size:11px;line-height:1.55"> 336 Watline Avenue<br/>
Mississauga, ON<br />
L4Z1X2 Canada
</span>
<span style="color:#696969; margin: normal; line-height:1.65; font-family:Verdana; font-size:11px">Phone: <span style="color:#000000; font-family:Verdana; font-size:11px"> 905-361-4303<br /><span style="color:#696969; font-family:Verdana; font-size:11px">Toll-free: <span style="color:#000000; font-family:Verdana; font-size:11px"> 1-888-4-De-Boer<br /><span style="color:#696969; font-family:Verdana; font-size:11px">Web: <a href="https://deboertool.com"><span style="color:#000000; font-family:Verdana; font-size:11px">www.deboertool.com</a><br /><span style="color:#696969; font-family:Verdana; font-size:11px">Email: <a href="mailto:[email protected]"><span style="color:#000000; font-family:Verdana; font-size:11px">[email protected]</span></a><br
/><br />

Moving the spans to sit inside the separating <div>s will probably work better. You also have some malformed HTML with a lot of missing </span> tags.

You shouldn't need display: block; CSS as this should be the default for <div>

<div>
  <span style="font-family:Verdana; font-size:14px; font-style:Italic; color:#F57C00;"><b>Gavin Charitar</b></span>
</div>
<div style="margin-top: 10px">
  <span style="font-family:Verdana; font-size:13px; color:#00000;">Business Development Representative<br /></span>
</div>
<div style="margin-top: 0px">
  <a href="https://deboertool.com">
    <img moz-do-not-send="true" alt="web" src="https://deboertool.com/images/email-logo.jpg" height="75" width="255">
  </a>
</div>
<div style="margin-top: -8px">
  <span style="font-family:Verdana; font-size:11px;line-height:1.55"> 336 Watline Avenue<br/>
Mississauga, ON<br />
L4Z1X2 Canada
</span>
</div>
<div style="margin-top: 9px">
  <span style="color:#696969; margin: normal; line-height:1.65; font-family:Verdana; font-size:11px">Phone:</span>
  <span style="color:#000000; font-family:Verdana; font-size:11px"> 905-361-4303</span>
  
  <br />
  
  <span style="color:#696969; font-family:Verdana; font-size:11px">Toll-free:</span>
  <span style="color:#000000; font-family:Verdana; font-size:11px"> 1-888-4-De-Boer</span>
  
  <br />
  
  <span style="color:#696969; font-family:Verdana; font-size:11px">Web:</span>
  <a href="https://deboertool.com">
    <span style="color:#000000; font-family:Verdana; font-size:11px">www.deboertool.com</span>
  </a>
    
  <br />

  <span style="color:#696969; font-family:Verdana; font-size:11px">Email:</span>
  <a href="mailto:[email protected]">
    <span style="color:#000000; font-family:Verdana; font-size:11px">[email protected]</span>
  </a>
</div>

You could also include the entire signature in an enclosing <div style="font-family: Verdana; font-size: 11px; color: #000000;"></div> to set the default font, size and colour. Allowing you to remove these from the markup and allow you to unwrap text where the new default styles are not being overwritten:

<div style="font-family:Verdana; font-size:11px; color: #000000;">
  <div>
    <span style="font-size: 14px; font-style: Italic; color:#F57C00; font-weight: bold;">Gavin Charitar</span>
  </div>
  <div style="margin-top: 10px">
    <span style="font-size: 13px;">Business Development Representative<br /></span>
  </div>
  <div style="margin-top: 0px">
    <a href="https://deboertool.com">
      <img moz-do-not-send="true" alt="web" src="https://deboertool.com/images/email-logo.jpg" height="75" width="255">
    </a>
  </div>
  <div style="margin-top: -8px">
    <span style="line-height:1.55"> 336 Watline Avenue<br/>
Mississauga, ON<br />
L4Z1X2 Canada
</span>
  </div>
  <div style="margin-top: 9px">
    <span style="color:#696969; margin: normal; line-height:1.65;">Phone:</span> 905-361-4303
    <br />
    <span style="color:#696969;">Toll-free:</span> 1-888-4-De-Boer
    <br />
    <span style="color:#696969;">Web:</span> <a href="https://deboertool.com">www.deboertool.com</a>
    <br />
    <span style="color:#696969;">Email:</span> <a href="mailto:[email protected]">[email protected]</a>
  </div>
</div>

10
  • Thank you so much Phuzi! I appreciate the help!
    – Gavin Charitar
    Commented Jul 8 at 15:24
  • Feel free to upvote and accept my answer if it helps/resolves your issue.
    – phuzi
    Commented Jul 8 at 15:44
  • This is my first post and I cannot upvote your post :-( I need 15 more upvotes for it to show,
    – Gavin Charitar
    Commented Jul 8 at 15:56
  • Just a quick question, the line-height tag is not working as it should. I tried changing the line spacing between the two paragraph, but the line -height is not registering my changes.
    – Gavin Charitar
    Commented Jul 8 at 15:58
  • Try changing the line-height to something like 10. You should see the chances then. Chances are that the "small" values you have now are getting swallowed up by some of the margin-tops you have.
    – phuzi
    Commented Jul 8 at 16:08

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