Outlook 2013 adding mystery space to layout between two tables. Help!

For some reason Outlook 2013 wants to add about 10px space between two tables I have stacked on top of each other. I have no padding css applied to the tables. No table heights etc. It renders perfectly fine in Outlook 2010. Surprising fact.

Here's what it looks like in Outlook2013

The only difference between the two is that I have an image in the bottom table with display:block; set.

The two tables are nested in a larger table however. Can't seem to figure out what is causing this spacing. Any ideas?

JohnP JohnP, 3 years ago

Is the top image set to display:block;?

If you have 2 tables sitting in the same <td>, maybe try combining them into one larger table with multiple rows. Rows don't separate as much as tables, even when forwarding out of Outlook.

One trick I also use is to set the bgcolor of the top table cell to the same color, that way if there is any separation, it will be hidden, avoiding the blue line you have.

bradley_j_yeah!, 3 years ago

Yes, top images has a display block on it.

I'll try combining it into one table and see if that works.

roshodgekiss roshodgekiss, 3 years ago

Perfect - you may also want to try border-collapse: collapse; and see if that helps at all.

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

I tried combining it into one table with a new table row. I got the same issues in the litmus test. Just odd.

@roshodgekiss, I do have collapse applie to all tables. I have an identical table above these with the same exact code applied. Doesn't create extra space. The only thing I can think of is some sort of extra blank space from a return is happening or some td height needs be applied. Hmmm.

nightjar nightjar, 3 years ago

Hey Bradley

Is the bottom image in a row of its own now? Have you tried adding valign="top" to that cell? Maybe the height of the row is blowing out, and by default that image will align to the vertical middle of the cell. Running a test with borders turned on can help you see what is actually happening too.

Otherwise could you share the Litmus test so we can see the results and code?

nismo1986, 3 years ago

I've run into all sorts of problems like this, usually solved with cellpadding="0" cellspacing="0" border="0" on the table element

JohnP JohnP, 3 years ago

Is the gap in between the tables or inside one of them? (Give the elements different background colors to test.)

Is the height set on the lower table to the same as the image height?

Maybe it has something to do with the page break? If you move the table to the top of the email is it still occurring?

Maybe it is just easier to post the code as we're all guessing here...

scottyPants scottyPants, 3 years ago

looks like that bottom image is kinda small. it the height is under 20px I have found that adding the height to the td as well as a style=line-height:?px; to the inline css works for 2013. So,

<td height="18" valign="top" style="border:none; line-height:18px;"><img src="?.jpg" style="display:block;" border="none" width="?" height="18" alt=""></td>

Hope this helps.

JohnP JohnP, 3 years ago

scottyPants has a good point. Never seen the '?' technique. Is that cross client or just an Outlook 2013 thing?

Generally, I keep the image and cell height at least 20px to avoid issues. Alternatively try valign="top" on the bottom cell to see if it helps.

scottyPants scottyPants, 3 years ago

The "?" was just because I don't actually know what the image src or height is, the 18 was an example. Ha, I guess I should have noted that. PLEASE replace the question mark with whatever your image src and width is.

publione, 3 years ago

I had the same issue a while ago. I resolved adding

vertical-align: middle;

to the <img> element. After that, the gap magically disappeared.

JohnP JohnP, 3 years ago

@scottyPants gotcha - I must have been having a long day that day...

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