SOLVED

Image in 2col newsletter shoving down the other column.

Go to solution
Highlighted
Anonymous
Not applicable

Image in 2col newsletter shoving down the other column.

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

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 7

Re: Image in 2col newsletter shoving down the other column.

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.

View solution in original post

8 REPLIES 8
Highlighted
Level 7

Re: Image in 2col newsletter shoving down the other column.

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.  

Highlighted
Anonymous
Not applicable

Re: Image in 2col newsletter shoving down the other column.

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....

Highlighted
Level 7

Re: Image in 2col newsletter shoving down the other column.

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.

View solution in original post

Highlighted
Anonymous
Not applicable

Re: Image in 2col newsletter shoving down the other column.

This has fixed it! Thank you so much for your help, kind sir.

Highlighted
Anonymous
Not applicable

Re: Image in 2col newsletter shoving down the other column.

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...

Highlighted
Level 7

Re: Image in 2col newsletter shoving down the other column.

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

Highlighted
Anonymous
Not applicable

Re: Image in 2col newsletter shoving down the other column.

Yes, here it is. Screen Shot 2016-07-08 at 12.21.01 PM.png

Highlighted
Level 7

Re: Image in 2col newsletter shoving down the other column.

Looks like the Helpful Resources box has been increased from 140px to 315px approx, look for that change somewhere in the code. If you can share the code, I can take a deeper look.