CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
Caius
Caius

Reputation: 1

Email signature - header banner

I'm trying to add a header to my emails. This would be an image and the way I want it displayed would be [banner][email body][signature]

But the problem is the image is displayed with two empty rows above it and the cursor placed on the first. This is in Outlook.

If anyone know how I can fix this, I'd appreciate it.

P.S. I need this to work in Thunderbird as well.

I created three div blocks, one for the banner, one for the email body and one for the signature, with an empty paragraph line in the middle div block. I thought this is how it would work, but no...

<div>
<table class=MsoNormalTable width='100%' role='presentation' cellpadding=0 cellspacing=0 border=0 style='background: none;border-width: 0;margin: 0;mso-padding-alt: 0 0 0 0; padding: 0 0 0 0;'>
        <tbody>
            <tr valign='middle'>
                <td valign='middle'>
                    <a href='https://google.com' style='text-decoration: none;'>
                        <img src='xxx' width=720 height=74 name='Banner' style='vertical-align: middle;display:block;' alt=''/>
                    </a>
                </td>
            </tr>
        </tbody>
</table>
</div>

<div style='background: none; mso-padding-alt: 15px 0 0 0; padding:15px 0 0 0;'>
<p> </p>
</div>

Upvotes: 0

Views: 570

Answers (1)

Bhavesh Ajani
Bhavesh Ajani

Reputation: 1261

.demo
{
   	border:1px solid black;
}
<div class="banner-div">
<table class="MsoNormalTable" width='100%' role='presentation' cellpadding=0 cellspacing=0 border=2 style='background: none;border-width: 0;margin: 0;mso-padding-alt: 0 0 0 0; padding: 0 0 0 0;'>
    <tbody  class="demo">
		<tr valign='middle'>
		   <td valign='middle'>
		       <a href='https://google.com' style='text-decoration: none;'>
		          <img src='demoimg.jpg' width=100% height="400px;" name='Banner' style='vertical-align: middle;display:block;' alt='banner here...'/>
		       </a>
		   </td>
		</tr>
		<tr>
		   <td>
		      <h2>email body here.....</h2>
		   </td>
                </tr>
</tbody>
  </table>
</div>
<div class="signature demo" style='background: none; mso-padding-alt: 15px 0 0 0; padding:15px 0 0 0;'>
<p>signature here....</p>
</div>

i think your problem is solved through update width="100%" and add second tr tag for email body

Upvotes: 1

Related Questions