0

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.

jsuissa
  • 1,754
  • 6
  • 30
  • 64
  • I've relied heavily on this exact type of vertical spacer in the past and have never had trouble with it. Can you post a link to the full HTML for the email template (including the DOCTYPE used), or add to the question above a large enough subset of the HTML to reproduce the problem? I'd like to do some testing of this in Litmus. I wonder if this is something new as of the last few months. – Matt Coughlin Feb 21 '13 at 16:07

2 Answers2

1

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.

walmik
  • 1,440
  • 2
  • 13
  • 30
  • Normally that works, but the same spacing issue occurs in Hotmail. In every other email client the table method you wrote works perfectly. Fairly certain this is all due to CSS Hotmail embeds by default. – jsuissa Feb 21 '13 at 02:08
  • 1
    What if you add a plain white/black/whatever-bg-color image with the required height as opposed to create the vertical space with tables or divs? So if you need a white vertical space of 100px, then you could simply create an image that s 100px high and use it in the required space. – walmik Feb 21 '13 at 04:10
  • Thank you for the suggestions. Using images would work as spacers, but I was trying to avoid that because usually images aren't enabled by default. If I can find a solution without using images that would be ideal. – jsuissa Feb 21 '13 at 18:42
0

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.

John
  • 11,985
  • 3
  • 45
  • 60