Extra white space to the right of images in Outlook

I'm having somewhat reoccurring issues with extra spacing being added to the right of image in Outlook. Has anyone else had this issue, and what is a workaround or remedy?

Just a little background -- the image is in it's on table cell and has the display:block style applied to it. The containing table row has the style line-height:0 applied.

Any help would be appreciated, either through the forum, or Twitter @substate.

Thanks

roshodgekiss roshodgekiss, 5 years ago

Hi substate, first up, does the table cell have an align= or valign= applied to it? Sometimes this can cause gaps. Otherwise, feel free to post your code here in this thread (or send it to our support team) and we'll take a look at it.


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

Here's the code:

  <tr>
    <td colspan="2" bgcolor="#FFFFFF" style="line-height:0;"><img src="main.jpg" alt="an evening with the Phoenix Symphony" style="display:block" /></td>
  </tr>

The complete email code is here: http://asufoundation.org/gfx/email/WP/symphony/invite.html

The issue seems to be sporadic, as sometimes this extra space does not show up to the right of the hero image, and sometimes it does. Any help would be greatly appreciated!

Chris

BThies BThies, 5 years ago

You have <td>'s with a colspan of 2, yet there are no rows with 2 individual <td>'s defined.

Also...

• <td>'s should have a defined width

• Colspans/rowspans can cause unexpected results.  Use nested tables instead.

• Close image tags with a />

• Use <br /> instead of <br>

• Line-height:0 is unnecessary


Brian Thies
Professional Email Developer
Thies Publishing
wilbertheinen wilbertheinen, 5 years ago

@BThies

"Colspans/rowspans can cause unexpected results..." Not if you use them correctly.


Create a Clang!
BThies BThies, 5 years ago

@wilbertheinen

I've witnessed and assisted on many coding issues in this forum in which colspans/rowspans were used properly but still displayed gaps and breaks.  Upon replacing with a nested table the issues went away.

Also, in creating a best practice scenario for newer and older email coders, the nested table more often prevents mistakes in adding rows and columns correctly.


Brian Thies
Professional Email Developer
Thies Publishing
wilbertheinen wilbertheinen, 5 years ago

@BThies

I've never had any problems with colspan en rowspan, but I agree on your argument that with nested tables the html is easier to manage and easier to customize and also less prone to errors.


Create a Clang!
BThies BThies, 5 years ago

@Wilbertheinen

Another reason would be major changes to a longer design.  If the design is tied up in colspans or rowspans, changing any part of it will mean the entire coding project is affected.  By keeping elements separate, you make it easier to swap out code.


Brian Thies
Professional Email Developer
Thies Publishing
wilbertheinen wilbertheinen, 5 years ago

@BThies

That's true. We have a couple of customers where we've used this way of thinking and the customer has no problems to customize the newsletter.


Create a Clang!

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