Converting an Image to a HTML mail signature

Question

I took our signature desing and turned it to a HTML code with my amateurish skills.

But when i put it to outlook, it looks broken.

Can someone show me how to do it or directly fix my code?

<div style="float:left;" id="renlogo">
  <img src="http://i.imgur.com/bs6yRbO.png">
</div>

<div style="float:left;" id="colorline">
  <div class="green" style="background-color: #67b32e;width: 4px; height: 52px;">
  </div>
  <div class="pink" style="background-color: #e61e47;width: 4px; height: 52px;">
  </div>
  <div class="blue" style="background-color: #51bec7;width: 4px; height: 52px;">
  </div>
  <div class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;">
  </div>
</div>

<div id="card" style="float:left;margin-top:20px;margin-left:12px;">
  <div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
    Burçak ÇELİK
  </div>
  <div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
    Co-Founder & Managing Partner
  </div>
  <br/>
  <div>
    <div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
    </div>
    <div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">E-mail:</span> burcak.celik@renunion.com
    </div>
    <div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">Website:</span> http://renunion.com
    </div>
    <div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
      <span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
    </div>
  </div>

Fiddle: https://jsfiddle.net/m46zx0oc/

Make sure images are public ally accessible; open html in browser copy it and paste to textarea in email settings to set signature; — itzmukeshy7, Apr 08 '16 at 11:09

Jelte Wiersma · Accepted Answer · 2016-04-12T15:29:21.403

<table>
  <tr>
  <td>
    <div id="renlogo">
      <img src="http://i.imgur.com/bs6yRbO.png" width="159" height="208">
    </div>
  </td>
  <td>
      <table style="border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;">
      <tr>
      <td class="green" style="background-color: #67b32e;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="pink" style="background-color: #e61e47;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="blue" style="background-color: #51bec7;width: 4px; height: 52px;"></td>
      </tr>
      <tr>
      <td class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;"></td>
      </tr>
      </table>
  </td>
  <td>
  <div id="card" style="margin-top:20px;margin-left:12px;">
    <div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
      Burçak ÇELİK
    </div>
    <div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
      Co-Founder & Managing Partner
    </div>
    <br/>
    <div>
      <div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
      </div>
      <div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">E-mail:</span> burcak.celik@renunion.com
      </div>
      <div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">Website:</span> http://renunion.com
      </div>
      <div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
        <span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
      </div>
    </div>
  </div>
  </td>
  </tr>
</table>

Instead of using float:left, use table instead. Outlook does not really handle float pretty well. Note that I added an extra <td></td> to create extra margin, feel free to add more for extra spacing.

Edit: Fixed the vertical colorline in Outlook. Also used a table for this to make it.

Jelte, thanks for your help. This is really a big progress for me. But the part
is not showing in the result. It's the colored vertical line between logo and info. Any ideas about fixing it? Thank you so much! — Burcak, Apr 08 '16 at 14:57
Hey Burcak, I updated the code. I tested it in Outlook and it looks fine now. — Jelte Wiersma, Apr 12 '16 at 15:30

Converting an Image to a HTML mail signature

1 Answers1