CODEWITHSUNDEEP
htmlemailsignature
Mike B
Mike B

Reputation: 15

HTML Email Signature - Images moving to line below

I'm very new to HTML and have been trying to build a HTML signature, I've managed to get it to work in a number of email clients and look how I want but sometimes, for instance on iPhone and in Hotmail/Outlook the social media icons in the second cell move below the company logo. Is there something I have missed or can improve upon so that they stay inline with the rest of the signature?

Below is the current code - I probably have things in the code that either don't need to be there or seem a bit strange but this is best I've managed to achieve. 

    <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;">    
</td>
<div style="clear:both"></div>

Many thanks

Upvotes: 1

Views: 1775

Answers (3)

NickyTheWrench
NickyTheWrench

Reputation: 3230

Try this:

<table>
<tr><td>
<div style="float:left;"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" style="width:100%;max-width:600px;"></div></td><td>
<div width="38px" style="display:inline;">
<a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="100%" style="max-width:38px;"></a><br>
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="100%" style="max-width:38px;"></a></div></td></tr></table>

It should be fully responsive for any email client or mobile device.

Upvotes: 0

josh1978
josh1978

Reputation: 738

edit Updated codepen and litmus. Try this. codepen. Looks the same in all litmus tests.

edit updated HTML

<div id="sig" style="min-width:400px;min-height:130px;max-width:600px;max-height:150px;padding:5px 0 0 5px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
  <td rowspan="3">
    <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg" width="454" height="117" alt="Lozi Designs" border="0" style="display:block;"/>
  </td>
  <td valign="middle">
    <a href="http://www.facebook.com/lozidesigns"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" border="0" style="display:block;"/></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.instagram.com/lozi_designs"><img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
<tr>
  <td valign="middle">
    <a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" border="0" style="display:block;"></a>
  </td>
</tr>
</table>
</div>

Be sure to validate your html code. You used table elements but didn't surround them with a <table> tag, there were more than one alt text given for the same images, and some of your quotes did not were not closed (not the width attribute below as an example).

Open: width="122 height="122"

Closed: width="122" height="122"

edit I cleaned up some of the styles in the image (you didn't need to float the logo), and removed cellpadding/cellspacing by setting them to zero in the table element. I rechecked Litmus and the social media icons appear as I believe they should.

Upvotes: 0

Daniel Rosano
Daniel Rosano

Reputation: 695

If you mean to leave images in the same line you should use display : inline instead of display : block

 <div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;">
  <tbody>
<tr>
<td>
  <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/></td>        
  <td valign="bottom"><a href="http://www.facebook.com/lozidesigns"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.instagram.com/lozi_designs"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">
<a href="http://www.lozidesigns.com"> <img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: inline;">    
</td>
<div style="clear:both"></div>

Upvotes: 1

Related Questions