Image in 2col newsletter shoving down the other column. | Community
Skip to main content
A
Anonymous
January 19, 2016
Solved

Image in 2col newsletter shoving down the other column.

  • January 19, 2016
  • 2 replies
  • 3602 views

Hello Marketo community, I'm a relatively new to email coding and I'm encountering some issues with Outlook rendering my newsletter.

I've created a template that has a banner and two columns, split (more or less) 75/25. If it's text-only, it renders great on all platforms. But when I introduce images into the right column, even when they're cropped down smaller than the column width, it shoves the right column down quite a ways for Outlook users on Windows. I realize post-2007 Outlook on Windows renders HTML through Word, which complicates things. But I designed this template around the current newsletter, which is being distributed through Constant Contact. However, when I went to download the source code from that email, it was a complete and utter mess.

It seems I can put images in the left column just fine.

One thing complicating matters is I'm on a Mac and I only know of this issue because my boss (who's on Windows) saw this issue in the sample messages I sent. I'm not having this issue with my version of Outlook.

I've attached the template with an image in the right-hand column, which should demonstrate what my issue is. (WW_Test_2). I've attached also the template without images.

Any guidance is much appreciated!

-Alex

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Frank_Breen2

I retested, I think you need to nest the left and right tables in another table with two columns, see attached. I tested this is Outlook 2010 and it looks fine now, it may have too much white space but you can change that.

On line 85 I changed

<td valign="top" >

to

<td valign="top" width="68%" class="table_responsive" style="width:68%">

and added

</td>

<td valign="top" width="24%" class="table_responsive" style="width:24%">

online 467

See attached.

2 replies

A
Anonymous
June 13, 2016

I just had this issue as well but with a standard/default Marketo 2-column template. Of course, my customer advocate was the one who told me, but I'm guessing she's on Outlook (Windows) as well because it looks great in any browser-based email client.

Any ideas for polishing or making this look better? I'm supposed to send out a second email tomorrow...

Frank_Breen2
Frank_Breen2
New Participant
June 14, 2016

Can you share the code or screen grab, it's hard to tell the issue without it.

A
Anonymous
July 8, 2016

Yes, here it is.

Frank_Breen2
Frank_Breen2
New Participant
January 20, 2016

Try the attached code, I moved the left column above the right column and removed position:relative; in both columns as this isn't supported and may be the issue. I put the bottom red box in a separate <td> too. Also note Outlook for Windows adds 20px to some <td> which could account for the right side moving too, this doesn't happen on a Outlook for Mac however.  

A
Anonymous
January 20, 2016

Thanks for the feedback! I think you're onto something with the 20px being added onto the <td>. Any thoughts for how I can avoid that? Or why it would only affect when images are placed into the right column?

I'd originally had the code with the left column above the right and without the position:relative styling, but was having the same issue. Except the right column was the one getting pushed down, instead of the left.

Oh, Outlook....

Frank_Breen2
Frank_Breen2Accepted solution
New Participant
January 21, 2016

I retested, I think you need to nest the left and right tables in another table with two columns, see attached. I tested this is Outlook 2010 and it looks fine now, it may have too much white space but you can change that.

On line 85 I changed

<td valign="top" >

to

<td valign="top" width="68%" class="table_responsive" style="width:68%">

and added

</td>

<td valign="top" width="24%" class="table_responsive" style="width:24%">

online 467

See attached.

Terms & ConditionsAccessibility statement

Loading footer...