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.
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?
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.
Yes, top images has a display block on it.
I'll try combining it into one table and see if that works.
Perfect - you may also want to try border-collapse: collapse; and see if that helps at all.
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.
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?
I've run into all sorts of problems like this, usually solved with cellpadding="0" cellspacing="0" border="0" on the table element
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...
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.
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.
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.
I had the same issue a while ago. I resolved adding
to the <img> element. After that, the gap magically disappeared.
@scottyPants gotcha - I must have been having a long day that day...
From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.Get started for free