Line break inserted by CM breaking layout

I have an email template that relies on there being no whitespace between some images so that there is no space between them in certain email clients (fun). The problem is, when Campaign Monitor imports the layout, it's adding a line break randomly in the middle of the images and messing up the layout. This wasn't happening a couple weeks ago. Was there a change recently in how Campaign Monitor transforms the markup? Does anyone have any ideas on how to solve, or is there any more information I can provide?

This is essentially what's happening. Code before:

<a href="/about-fdd"><img src="/assets/newsletter/images/nav-about.png" /></a><a href="/congress"><img src="/assets/newsletter/images/nav-congress.png" /></a><a href="/research"><img src="/assets/newsletter/images/nav-research.png" /></a><a href="/"><img src="/assets/newsletter/images/nav-home.png" /></a><a href="/project"><img src="/assets/newsletter/images/nav-projects.png" /></a><a href="/experts"><img src="/assets/newsletter/images/nav-experts.png" /></a><a href="/media"><img src="/assets/newsletter/images/nav-media.png" /></a><img src="/assets/newsletter/images/logo-title.png" style="display:block; float: left;" /><img src="/assets/newsletter/images/bar-blue-gradient.png" style="display:block; float: left;" /></td>

Code after:

<a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/y/"><img src="http://i1.createsend1.com/ei/y/08/896/392/112945/csimport/nav-about_0.png" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/j/"><img src="http://i2.createsend1.com/ei/y/08/896/392/112945/csimport/nav-congress_1.png" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/t/"><img src="http://i3.createsend1.com/ei/y/08/896/392/112945/csimport/nav-research_2.png" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/i/"><img src="http://i4.createsend1.com/ei/y/08/896/392/112945/csimport/nav-home_3.png" /></a>
<a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/d/"><img src="http://i5.createsend1.com/ei/y/08/896/392/112945/csimport/nav-projects_4.png" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/h/"><img src="http://i6.createsend1.com/ei/y/08/896/392/112945/csimport/nav-experts_5.png" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/k/"><img src="http://i7.createsend1.com/ei/y/08/896/392/112945/csimport/nav-media_6.png" /></a><img src="http://i8.createsend1.com/ei/y/08/896/392/112945/csimport/logo-title_7.png" style="display:block;float:left;" /><img src="http://i9.createsend1.com/ei/y/08/896/392/112945/csimport/bar-blue-gradient_8.png" style="display:block;float:left;" /></td>

There is a line break at the end of the 4th image link.

roshodgekiss roshodgekiss, 5 years ago

Hi kevincupp, I noticed that there was an errant space after the 4th image tag. Once I removed it, the gap disappeared.

I noticed too that you were using floats - email clients like Outlook don't support this. Instead, I've swapped out the floats for <br /> tags, which do the trick just fine :) I also added border="0" to the images, to prevent the links from introducing blue borders. Here's the tweaked code:

<table width="620" cellpadding="0" cellspacing="0"><tr>
  <td><img src="http://i9.createsend1.com/ei/y/08/896/392/112945/csimport/bar-blue-gradient_8.png" border="0" /><br /><img src="http://i8.createsend1.com/ei/y/08/896/392/112945/csimport/logo-title_7.png" width="620" height="55"/><br />
<a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/y/"><img src="http://i1.createsend1.com/ei/y/08/896/392/112945/csimport/nav-about_0.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/j/"><img src="http://i2.createsend1.com/ei/y/08/896/392/112945/csimport/nav-congress_1.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/t/"><img src="http://i3.createsend1.com/ei/y/08/896/392/112945/csimport/nav-research_2.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/i/"><img src="http://i4.createsend1.com/ei/y/08/896/392/112945/csimport/nav-home_3.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/d/"><img src="http://i5.createsend1.com/ei/y/08/896/392/112945/csimport/nav-projects_4.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/h/"><img src="http://i6.createsend1.com/ei/y/08/896/392/112945/csimport/nav-experts_5.png" border="0" /></a><a href="http://newsletters.insidenewcity.com/t/y/l/okydyk/l/k/"><img src="http://i7.createsend1.com/ei/y/08/896/392/112945/csimport/nav-media_6.png" border="0" /></a></td></tr></table>

Hope that helps! :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
kevincupp, 5 years ago

Thank you! Yes I noticed the errant space, the problem is Campaign Monitor is inserting that space/linebreak and is messing up my layout. It looks great before it's imported into Campaign Monitor. I need all of the images on one line, so adding break tags won't help me. I was hoping someone from Campaign Monitor with deep knowledge of the import process could point to the issue in my code or theirs, but it looks like I'll probably end up needing to just rework how the page is displayed so that the importer is less likely to break my layout.

Thanks again.

oneblackcrayon oneblackcrayon, 5 years ago

Hi kevincupp!
You could try inside the code Ros provided, adding an inline style of

whitespace:nowrap

to TD tag or div tag that contains your links/images. Also, try a hard delete (CMD+Delete or CTL+Backspace) to remove spaces.

abberdab, 4 years ago

I am having the exact same problem! Three images meant to be side-by-side (and which together form a seamless design element) are wrapping. After staring endlessly at my pre-import code, trying to find potential problems and massaging it with no results, I compared my pre-import code to that shown in the post-import version and — lo-and-behold — there was a carriage return inserted into my code during the import process.

Pre-Import Code

<a href="http://www.facebook.com/GCIAK" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="images/follow_facebook.jpg" alt="Find Us on Facebook" width="36" height="37" border="0" style="line-height: 18px;" /></a><a href="http://twitter.com/GCIAK" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="images/follow_twitter.jpg" alt="Follow Us on Twitter" width="26" height="37" border="0" style="line-height: 18px;" /></a><img src="images/follow_followus.jpg" alt="Follow Us" width="126" height="37" style="line-height: 18px;" />

(apologies for the inline style cruft)

Screenshot: http://dl.dropbox.com/u/26304290/CM/Before.png

Post-Import Code

<a href="http://gciwireless.createsend1.com/t/j/l/mljvr/l/p/" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="https://i1.createsend1.com/ei/j/95/8FD/B8C/054652/temp_import/images/follow_facebook.jpg" alt="Find Us on Facebook" width="36" height="37" border="0" style="line-height: 18px;" /></a><a href="http://gciwireless.createsend1.com/t/j/l/mljvr/l/x/" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="https://i2.createsend1.com/ei/j/95/8FD/B8C/054652/temp_import/images/follow_twitter.jpg" alt="Follow Us on Twitter" width="26" height="37" border="0" style="line-height: 18px;" /></a>
<img src="https://i6.createsend1.com/ei/j/95/8FD/B8C/054652/temp_import/images/follow_followus.jpg" alt="Follow Us" width="126" height="37" style="line-height: 18px;" />

Screenshot: http://dl.dropbox.com/u/26304290/CM/After.png

Out of desperation, I tried throwing a <nobr></nobr> around the images in question, and that did keep the images from wrapping, but, the result was not exactly what I was looking for. The extra space created by the inserted return became apparent and my table cell was pushed wider than designed, also breaking the layout above it.

http://dl.dropbox.com/u/26304290/CM/NOBR.png

In most situations, I would have started with a design that could be more flexible, but this is one of those designs that was handed to me from down high, the product of innumerable rounds of committee reviews and approvals. I'd like to reproduce it as closely as possible (and had it very tightly locked up before importing).

Help?

Carissa Carissa, 4 years ago

Thank you again, abberdab, for sending an email in to support as well. For the benefit of others, I can explain what was happening.

Basically, we force a line break in long lines of HTML because some email clients take issue with them. Our system is pretty smart and looks back in the code to find a nice place to break the line, but in some cases its choice isn't ideal for a pixel perfect design.

If you see this happening, to get around it break the line yourself within an HTML element before an attribute. So, using abberdab's example, the long line of code could be broken up like this:

<a href="http://www.facebook.com/GCIAK" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="images/follow_facebook.jpg" alt="Find Us on Facebook" width="36" height="37" border="0" style="line-height: 18px;" /></a><a href="http://twitter.com/GCIAK" style="line-height: 18px; color: #c31e2d; font-weight: bold; font-size: 11px;"><img src="images/follow_twitter.jpg" alt="Follow Us on Twitter" width="26" height="37" border="0" style="line-height: 18px;" /></a><img 
src="images/follow_followus.jpg" alt="Follow Us" width="126" height="37" style="line-height: 18px;" />

Carissa
Campaign Monitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098