How can I add a spacer between tables? My code isn't working.

Hi, I'm new to the forums. I have a template that uses tables for each editable region, e.g.:
TABLE
TABLE
TABLE

When I created a repeatable spacer table, it does not appear in the email campaign. It's as if no spacer were added. Here's the spacer code.

<layout label="Separator with gap">
<table width="600" cellpadding="0" cellspacing="0">
<tr><td valign="top" align="center" height="12">
<singleline>&nbsp;</singleline></td></tr>
</table>
</layout>

I suspect the height=12 is being ignored by email clients because there is no content in the cell, which collapses the table. I tried using a blank spacer image, but that looks very ugly in email clients when images are blocked.

Is there a way to add a spacer that does not include an image? Thanks!

Example of what the spacer should look like:
https://dl.dropbox.com/u/77642786/CM%20spacer%20example.png

Stig Stig, 1 year ago

Hey missionmode,

The following simple line of code should be very widely supported:

<div style="font-size: 12px; line-height: 12px;">&nbsp;</div>

However, since you're adding these spacers as repeater layouts, there's a couple issues you may run into.

1. Each layout needs at least one editable element, a <singleline>, <multiline> or editable image.

2. If you use a <singleline> tag and your repeater content is empty, you may see the whole repeating item get stripped out by our editor when the email is sent.

This can happen even if you have a non-breaking space as the default text. However, I've found that throwing a few spaces in there seems to do the trick:

<div style="font-size: 12px; line-height: 12px;"><singleline>&nbsp;&nbsp;&nbsp;</singleline></div>

Sorry our editor makes this a bit trickier than it should have to be, but hopefully this code will work well for you.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
missionmode, 1 year ago

Your suggestion worked. The separators are visible in the test campaign I sent. Thank you!

missionmode, 1 year ago

Update: I discovered that a 1px clear GIF can be used for spacing and Outlook does not treat it as an image placeholder when images are not displayed. For example: 

<img border="0" src="clear.gif" width="1" height="15">

inserts a 15px blank separator. Normally, Outlook inserts ridiculously long text in each image placeholder, which is really ugly. However, Outlook and other clients don't display a placeholder for the clear GIF. The separator looks the same with images on or off, which is what I want. I confirmed this through testing with Email on Acid.

Redferret, 1 year ago

In my experience Outlook does display a place holder where the image should be, often i see tiny grey lines in client emails due to this, In 2012, we don't really need spacer images any more.

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account