CODEWITHSUNDEEP
csshtml-emailhotmail
jsuissa
jsuissa

Reputation: 1762

Issue using <div> as vertical spacer in Hotmail HTML email

We're using the following code as a vertical spacer in an HTML email:

<div style="height:14px; font-size:14px; line-height:14px;">&#160;</div>

This works well everywhere -- except Hotmail where it creates a very large space. We've researched this a bit and it seems Hotmail embeds CSS by default that causes a lot of issues.

We've included the following code to try to address the issue, to no avail:

.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%; margin: 0; padding: 0;}

Hoping that someone else here might have a solution or even a workaround.

Upvotes: 0

Views: 1139

Answers (2)

John
John

Reputation: 12193

You can use this: <br>&nbsp<br> or you can wrap it in a font tag to set the height. You can also use padding in your <td>, or a table as saganbyte suggested.

Just note that Outlook wraps <p> tags around tables, which adds about 15-20px of vertical spacing if someone forwards your email. Using a table rows instead adds only a few pixels. With this in mind, always keep your background colors the same so that you don't get an unwanted line.

Upvotes: 0

walmik
walmik

Reputation: 1452

If its just a spacer then why not use a table with a spacer image instead. Most email clients prefer a table over a div with inline style and will render it correctly. Something as such:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="10">
      <img src="http://media.instantcustomer.com/22033/0/5_spacer.png" alt="" width="1" height="10" border="0" style="border:0" />
    </td>
  </tr>
</table>

Change the height from 10 to whatever height you need. You ll have to specify the height in the td as well as the img element. Replace the spacer image if you like. You might even be able to get away with not using a spacer image at all.

Upvotes: 1

Related Questions