How to Draw Lines in Outlook 2013
Nicholas Sheehy replied
A quick fix for me was to add an outlook-only <br /> to the affected text areas within a <td>:
<td width="auto"> <span style="color:#bbbbbb; text-decoration:none; mso-line-height-rule:exactly; line-height:1.5; font-size:13px; font-family:Arial, sans-serif;"> Lorem ipsum dolor sit amet ... <!--[if gte mso 12]><br /> <![endif]--> </span> </td> This worked for me! Thank you!
This seems to work in some cases BUT:
At our side we can get different lines by different zooming settings (Outlook AND Windows).
So it might fix it at your view, but if a customer or colleague is using a different setup (Win10 vs Win7, text-scaling 100% vs text-scaling 150%, or something like that). So even if they didn't zoom manually it might still be a different experience.
Can someone confirm that zooming shows different lines?
If yes, wouldn't we need to put this fix everywhere?
I tried it at a single section and it prevented the line from showing for most zooming settings, but it was just moved on some others.
This worked for me with a slight change <!--[if gte mso 12]><p style="font-size:12px;line-height:12px;> </p><![endif]-->
Robert Fletcher replied
How would add this so it doesn't add any space?
Andrea Striebel replied
This worked for me too!
Bojan Pop-Trajkov replied
Thanks, this still works (september 2018) :)
Crystal Clark replied
I have no idea why this worked for me when other fixes did not, but it did! Thanks for sharing.
MR
This is possibly an issue with font-sizes.
I jut ran some tests from 11px to 18px and saw the mysterious line on 13px and 17px the rest were fine.
If you want 13px you can maybe do something like font-size:13px;mso-ansi-font-size:14px;
Not much time for testing this at the moment but that might sort it for you.
MR
UPDATE: Rémi (hteumeuleu) had previously seen the same thing work by changing an image height
And I've just seen adding or removing a line of text also fixed the issue, so looks like it's down to the height.
WH
I've seen the issue with heights that uses odd px values. By changing for example 25px to 26px the line is gone.
It's working perfect. Thanks a lot @Mark
I haven't been able to test outside of one email, but I finally got rid of a mystery line by applying some mso- specific styles onto the table:
style="border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
Probably luck rather than a lasting solution but anyone coming here out of desperation may as well give it a try.
CL
Hi! Just tested this technique successfully :D (thanks Yesler)
I put the css in my header section like so:
<!--[if (gte mso 9)|(IE)]> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;} </style> <![endif]--> 
BF
This worked for me thankyou!
Just tested this technique successfully on another email also. Got rid of the lines by applying to all parent tables.
comScore Marketing replied
That fix worked for me! Thanks!
BF
Fixed for me, thankyou!
Strawberry soup replied
For me, the issue described was caused by whitespace, which was being rendered as underlines in MS Outlook. I swapped all the whitespace for & n b s p ; and managed to get rid of all the lines. Adding a & n b s p ; after a nested table and before the closing parent </td> fixed a line too.
I thought I had this issue under control in my emails until our companys outlook 2016 had been updated to version 1704. With this update came a massive reoccurence of the 1px outlook 2016 problem, not only in my emails but in most of our benchmark mails, too. Seems like litmus hasn't yet adapted v 1704, since my email looks fine there.
None of the solutions given in this thread worked, changing the table height even made it worse. I will keep trying to get around the problem and keep you posted. Has someone else experienced the problem with this version?
LG
Lindsay Groom replied
Hi Janis - Just wondering if you've come across any solution as this has now become an issue at my company too. Thanks in advance.
Hi Brittany,
a colleague of mine could fix the issue by removing or filling any empty <td>s with in his mailing. However, this did not work for me since I have the issue with non-empty <td>s, too.
As version 1705 is currently being rolled out in my company, the issue seems to have been fixed by MS - colleagues with 1705 don't see the new white lines any longer.
This is only for the lines that were new in 1704, any problems resulting from not having border-collapse, padding="0" etc. still exist, but have already been addressed in our template.
Ran into this issue for the first time just now on a template that we have been using for over 2 years. (sigh)
There were five instances of a button link with text and chevron image. However, the issue only presented itself on the last button for some reason.
To resolve the issue we found that it was caused by setting the font-family on the <td>, by moving it into the <span> contained within the <a>, the issue was resolved.
The code before:
<td width="225" align="center" valign="middle" style="color:#000000; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:13px; padding-top:17px; padding-bottom:14px;">
<a href="#" target="_blank" style="color:#000000 !important; display:inline-block; text-decoration:none;"><span style="color:#000000"><strong>FIND OUT MORE</strong><img src="images/cta-arrow.gif" width="14" height="11" border="0" alt="" style="margin-bottom:-1px;" /></span></a>
</td>
and after
<td width="225" align="center" valign="middle" style="color:#000000;font-size:11px; line-height:13px; padding-top:17px; padding-bottom:14px;">
<a href="#" target="_blank" style="color:#000000 !important; display:inline-block; text-decoration:none;"><span style="color:#000000;font-family:Helvetica, Arial, sans-serif; "><strong>FIND OUT MORE</strong><img src="images/cta-arrow.gif" width="14" height="11" border="0" alt="" style="margin-bottom:-1px;" /></span></a>
</td>
Hope this is some help to folks out there.
Marek Vočadlo replied
Perfect solution for my problem. Thanks!
Toby Hendricks replied
Thanks for this! Worked like a charm.
Jonathon Lewins replied
I've seen this issue happen with lots of responsive templates I've worked on recently and haven't had any success in finding a code-based solution. One thing I have noticed, though, is that if I increase of decrease the amount of copy in a table a cell by 1 line - it can make the line appear/disappear. This is just adding to the confusion for me!
CF
I'm thinking that somehow could be related as to if/when they appear, because I'm seeing horizontal lines in a current email using a master template, and I haven't come across this issue using the template previously.
Shonte Crawford replied
This issue is on going and as far as I know Microsoft doesn't even have a fix because it happens very periodically and it may show up on one and not on the other... I hate it because it just appears to be a glitch and everyone freaks out
Kathryn Wilson replied
yes, this glitch is indeed a crowd displeaser. If we could work out the trigger we could work against it. I have found the issue in other outlook versions not just 2016.
CF
I haven't seen long horizontal lines, but I did have an issue with vertical lines (also showing up in the colour of the body background) which I was able to solve: https://litmus.com/community/discussions/5286-mysterous-white-line-in-outlook
Not sure what would cause horizontal lines though, interesting article and like everyone else would love to know what the cause/solve is!
Doug Thwaites replied
Thanks Courtney, this article helped me.
In short wrapping all content block in a table with style="overflow:hidden;" on the <td> wrapping the content blocks worked a charm.
Different for eveyone but this is a good solution if you can wrap all of your content blocks in it.
I stumbled upon a solution that may help. It worked for me when I added it to every table in the mailer.
Need to set border-collapse and other table settings to remove 1px whitespace around cells:
"border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
Source: http://freshinbox.com/resources/css.php#outlook
BT
I know this post is old, but there's a really simple fix. In the past we set a line-height to 0 on <tr>'s for Outlook, however, beginning with Outlook 2016, the minimum line-height became .7pt (.75pt to be exact) which reintroduced the issue.
Here's my fix. Place this in the head of the document:
<!--[if gte mso 9]>
<style>
tr { font-size:1px; line-height:0.7pt; }
</style>
<!--[if gte mso 9]>
And anywhere you encounter a blank <td> with a height that is less than 21px, place an Outlook conditional non-breaking space:
<!--[if (gte mso 9)]> <![endif]-->
If the space is narrow where you have the blank <td>, use a zero-width space instead:
<!--[if (gte mso 9)]><![endif]-->
For many emails, I've found just the code in the <head> of the document will resolve a good portion of the problems without having to use the conditional non-breaking space/zero-width space. So just test and add where necessary.
I've coded thousands of emails using this, and have had no issues.
GM
This line has been killing me, although I've managed to get it to stop appearing I'm unable to use the fix with my current design - boooooo! :(
But it seems to be due to what most people have mentioned - the wrapping table being too long.
I'll try and explain this as best as I can, I have a stunted layout design which the content section consists of a wrapping table with 3 columns, the second column is only for spacing and is hidden on mobile.
Inside the left and right THs I have stacked tables one ontop of another;
Table 1 - Top image - full width
Table 2 - Price + bottom part of image
Table 3 - Spacer
Table 4 - CTA
Now this section is repeated twice on the left and 3 times on the right - all the code is copy and pasted and then image links are changed so there's no amendments to the formatting. The bottom section of both the left and right hand side have a line between the main part and bottom part of the image, only in Windows 10 mail.
I tried all the fixes on this page down to "Hazel Browns" suggestion but with no avail.
Kathiravan's suggestion wouldn't let me keep my stunted design so I didn't try it until last.... but what'd ya know?! As soon as I I took the bottom right hand column section and pasted it below the stacking wrapping table, it displays perfectly! Whilst the broken sections above it remained broken.
So it looks like wrapping table heights have a max height before things start to get messy, I assume it's something to do with the page breaks in the word processor but who knows.
Also, has anyone seen this joke of a reply and response from microsoft? Totally ditched us.... and we're apparently helping to make it better?
If you have an account any upvotes would help bring it back to their attention :)
https://social.technet.microsoft.com/Forums/office/en-US/1f4f1e03-8ad5-4079-bc18-8fcaaa7b785d/outlook-2016-renders-horizontal-lines-seemingly-randomly-in-html-emails?forum=Office2016ITPro
And ty Rody for posting this link!
And ty Kathiravan for posting your fix!
Stefano Bagnara replied
It's not about the "table height" as I've been able to reproduce (see the 1px line) even in very small emails.
Is your issue visible only in "Windows 10 mail" or also in "Outlook 2016"? What account are you checking with Windows 10 mail (what domain)? What protocol are you using to download your email in win10? (IMAP/POP3/Exchange).
GM
Hey Stefano,
That's a good point! It slipped my mind that you mentioned this previously so I do apologise! :)
I'm just testing in litmus and the problem only ever appears on Windows 10 mail - outlook 2016 is always perfect. Taking the content out of the stacking wrapper was the only thing that rectified the issue for me - now no matter how many tests I do the issue won't show up but if I pop it back inside the wrapper it breaks again. I've also tried this with other sections further up the email, swapping to make sure there were no coding differences etc. Very strange!
Have you got any other ideas that we could try testing? Everything for me points to the wrapper height but if you're re-creating the issue in postcard style emails then there must be something else at work here!
Why won't they just tell us? ;_;
Stefano Bagnara replied
If you look at the mosaico.io blog post I linked in the first post here you can see the "single table code" that let me reproduce the "bug". You just need a single table with a bunch of rows.. but, this only happens with given cellspacing and given font sizes.
Weird you don't see the issue in Outlook 2016: please make sure the test is on Outlook 2016 Windows and not Outlook 2016 for Mac because Outlook 2016 Mac uses WebKit for rendering and works fine.
GM
Ah yes I see! Hmm, I generally stay away from multiple rows in my tables so that can't be the issue for me.
As for 2016 - litmus's windows 10 mail tests using windows 7 so it is running on Word but there were no issues with my email prior in this client. Now that I've checked the test (Which includes the previous test with a repeated content section outside of the stacking table) the issue has swapped places, so on 2016 the line only appears on the bottom content which is outside the stacking table whilst the inside sections are fine - it's the opposite on Windows 10 Mail....
Here's some images to help better explain:
https://postimg.org/gallery/1mbqimcyg/
Give us another 30 days, I'm sure we'll crack it ;) haha
EDIT: Okay so you mentioned that it only appeared every x row right?
So I added an additional spacer table above the two broken image tables, so essentially there were two spacers above it and this caused the line to move to the next section- which is totally white so it fixes the issue for my design. So from what I'm gathering, the lines appear after every "X" row, but if you build with single row tables as I do you probably won't come across the issue as frequently as you did with multiple rows.
So it's not a fix but by adding an additional table above the broken elements, you can force the line to move further down your creative until you can hide it somewhere appropriate. Might be some bloat but at-least it's working.
LD
Interesting article Stefano - thanks for sharing.
I'd also be interested to know what the fix is.
Goodville Mutual replied
If anyone is still having this, I searched far and wide but this finally worked for me https://code.support/code/html/fix-horizontal-line-in-emails-for-outlook-2016/
Michael Knapp replied
This worked for me combined with the following in the head. Thank you! Solved a very big headache of mine.
<!--[if gte mso 9]>
<style>
tr { font-size:1px; line-height:0.7pt; }
</style>
<![endif]-->
Note: I use a fluid div approach with ghost tables
VH
@ all had the same issue with that =/ so I got rid of height at all :D
Personaly I take down the padding top and bottom on all my <td> (before text elements) elements & <Table>. Further more mso-line-height-rule:exactly; does the trick =) If it not works put a <span> arount the text or use <font> with inline style like above.
Preview Code
<tr> <td> <table style="border-spacing:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;margin:0;" width="100%"> <tbody> <tr> <td style="padding: 0 5px 24px 5px;mso-line-height-rule:exactly;line-height:36px;font-size:33px;"> <span style="font-size:33px;mso-line-height-rule:exactly;line-height:36px;font-weight:100;font-family:'Century',sans-serif;"> HEADLINE NEW IN! </span> </td> </tr> </tbody> </table> </td> </tr> The issue could be coused by the Font allthou we say Px the software uses Pt =/ its vissible if you overlap the screenshots from owa and outlook in PS. That way I could get rid off those unwanted gabs always and faster =)
Haley Marketing replied
I only just encountered this issue for the first time but I was seeing it only on my spacer tables. They're built like:
<table width="100%"> <tr> <td height="5" style="font-size: 0; line-height: 0;"> </td> </tr> </table> Changing that font-size and line-height to 1px each seems to have done the trick for me.
Michelle Driman replied
This issue looks to me like it's caused by a table height that Outlook 2016 doesn't like (though not necessarily one that is too high, or higher than a particular threshold) because it appears on small tables too. I tried adjusting the height of the table contents by 1 pixel, and it seems to have removed the border wherever I've tried it. Example: I reduced text line heights in tables where it was appearing, or adjusted the top/bottom padding by 1 pixel, and the border disappeared. This may well be fluke, but please test and let me know if this works for anyone else?
ET
I would get an error like this when the container table is long. Outlook tables have a max height, i think it's 1300px or something. If i get the line in the email i would break the tables up into 2
IH
This is often the case for me - usually i can fix the "added-line-problem", by adding an extra "divider"- table. (no border, border-collapse etc, so it doesn't break the layout)
Stefano Bagnara replied
This is a different issue. My sample email is shorter than 1300px and if you look at the links you'll see I'm able to reproduce the issue in very small emails.
Also, the 1300px issue is shared by Outlook 2007/10/13/16 while this specific issue is only present in Outlook 2016 (Windows).
Chris Harding replied
I think i have worked out the main cause of this, its due to the DPI settings of the comuter. If you change the Zoom on the computer it makes the lines appear or disapear.
I ahve tried all the methods listed below and none seem to work.
Any other ideas of how to fix this?
Marc Steinhoff replied
I ran in the same issue this week. After scanning the inputs on this page and some tests, i can give the following input: in my case it is depending on the content (the height of the table). First i removed the line-height on the inline styles and it fixed it in some places (table heights changed by removing the line-height). If a line still appeared, i added more text above and then it dissapeared (again table heights changed). The last thing i tested was changing the background-color to the same color as the background of the content. Then no lines where visible.
Marc Steinhoff replied
The additional styles in the head according to the comment from Clara Maria Løfgren fixed the issue entirely in case of my template. Thank you Clara Maria Løfgren!
BF
When I removed my font styling from the <td> the horizontal line disappeared.
After some investigation I fixed the issue by changing my line-height. It was originally 15px so changed to 1 (no px). Also 14.9px worked too. interestingly any larger px value retained the horizontal glitch.
I'm struggling with the same mysterious lines - very interested in a possible fix!
Easy Workaround: NO empty tabledatas .... insert in empty tds <div style="font-size:1px;line-height:1px;mso-line-height-rule:exactly;"> </div>
2 years to late :-)
For me, avoiding padding worked. Put padding and margin all 0px and use td width and height wherever you need padding. This worked for me. I have also noticed sometimes if the td is aligned middle by default with some spaces on top and bottom, it will cause white lines to appear. I used vertical-align:top and put some spaces using td height there. It seems to be a ridiculous fix though.
WC
I actually wasn't able to fix this issue permanently, but, it seems like it's somehow a calculation issue from Outlook 2016 itself. By simply adding 1px to the <td> that containing the weird line, can fix it. I tried in two of my campaigns, and it works. But I know that's not an ultimate fix. But maybe someone can figure out something more useful.
MH
Mike Hargreaves replied
When I had an issue like this I found that the line matched a bgcolor attribute or background-color style in a top level table, td or body tag. Vary those colours for a test, and then check the colour of the line in photoshop.
Yes, I am having this same issue. In a stack of identical tables, in a nested cell, I am getting a random 1px white btm border on 1 or 2 random tables. If I rearrange the table running order, the border will move and isn't specific to a particular table. Completely perplexing. This issue is showing in Outlook 2019, but in no other version of Outlook.
NH
When I removed my font styling from the <td> the horizontal line disappeared.
After some investigation I fixed the issue by changing my line-height. It was originally 15px so changed to 1 (no px). Also 14.9px worked too. interestingly any larger px value retained the horizontal glitch.
AC
I was having the same issue too, only in Outlook 2016, so thought I'd share my problem and solution in case it helps anybody else.
In our email boilerplate we narrowed it down to removing all font styles from any <td> elements, such as font-weight, font-size etc, and instead applying those styles directly to typography elements and <spans>.
We only had those styles down as a fallback, so removing it fortunately didn't impact the email design. This solution works for us with tables of any height (tested on over 700px height).
Feel free to check it out and use our boilerplate at Cogentro.com.
Creative Dept User Design replied
This worked for me!
I have spent quite a bit of time the last two days dealing with this issue. Finally, I found out that it has to do with the ratio of the email content width and the with of the display. I reduced the size of my email from 660px to 600px and the white line disappeared.
So its 2018 and this problem still persists.... So much for Litmus and Microsoft teaming up to make email better. Can't even fix a 1px line that has been problemsome for years.
2019 and still nothing - what exactly did this litmus and Microsoft team up accomplish? I've seen ZERO improvements.
Project Management | OpenMoves replied
We have been going crazy with this and having a hard time getting any info, looking forward to feedback on this also
Hrishikesh Karve replied
Add the css property "display:block" inside the <img />
e.g <img src="1.png" alt="banner" style="display:block">
JJ
Jason Justice replied
My issue was unit-less values for line-height!
Actually i found that this bug is related to the height of the table. If you get the line, try changing the height of your <td> by adding/removing padding or adding/removing some <br> tags. Moral of the story, Outlook is dumb, like all Microsoft products.
NM
Nicole Merlin replied
There is a new post about this today over at Apsis: http://www.apsis.com/blog/ask-email-designer-fixing-lines-outlook-2016
I haven't had time to try it yet, but it might help!
PE
Looks like the Apsis suggestion is not actually fixing/preventing the lines - they're only providing a solution to re-color the lines to match your content background. More of a hack than a fix.
Stephen Gillmore replied
I've been able to solve this by adding style="border-collapse: collapse;" to the tables surrounding the line. Give it a try.
Stefano Bagnara replied
How do you keep applying cellspacing/cellpadding (padding / border-spacing) using border-collapse: collapse ? BTW, I think you have only been lucky... when I experience the 1px issue I do some really minor change around and the 1px disappear (or moves somewhere else).
I updated Outlook to the latest version - Build 1705 8201.2102 - and the lines went away. Using Windows 10.
Stefano Bagnara replied
In my experience Outlook 1705 8201.2102 changed something: some 1px lines disappeared and some other 1px lines appeared. The issue is still there, it just changed the random seed. So you have just been lucky... I had emails with no lines in my Outlook 2016 inbox and now reopening them with build 1705 8201.2102 I see the bad lines .
I am seeing a 1px border below a bullet proof button in Litmus Outlook 2016 test. I don't have a live version to view. So far I have only tried adding to the containing table:
style="border-collapse: collapse; border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt;"
which didn't fix.
GD
I can concur with Julie; the new update appears to have fixed the issue, certainly displaying on two PCs we have here.
A fix I found was to add a background colour using outlook conditional comments. So if you're main background colour (strips on the lhs/rhs of your main centered column) is grey, then:
<!--[if mso]> <style type="text/css"> .body,body { background: #dddddd !important; } </style> <![endif]--> This removed all noticeable 1px lines for me instantly. I tried adjusting line-heights/font-sizes/padding as per other recommendations, but this is the only method that has worked for me.
CF
Ok, so I have run into the horizontal line issue for the first time today in a Litmus preview for Outlook 2016... not sure why only now as I haven't with this specific email template before. Fun stuff as always. ;)
As Nicole mentioned, this article has a potential solve (http://www.apsis.com/blog/ask-email-designer-fixing-lines-outlook-2016) and notes it has to do with the background colour set on the <body>. However this particular email I'm working with has different background colours for various sections of the email, so changing the body background colour won't be a solve for me. :/
stephen provenzano replied
I've seen this happen when applying padding to an element (td in my case) that has direction: rtl/ltr set on it either in CSS or as an attribute. Not sure if that's what is happening here or not. Moving the padding to another element nested inside usually fixed the issue.
Kathryn Wilson replied
I have this issue with one of my email designs and it is showing up on:
- Outlook 2013
- Outlook 2016
- Outlook 2011 (OSX) - see note [1]
- Outlook 2010 see note [2]
- Outlook 2007
Notes:
[1] For Outlook 2011 OSX the location is border top not bottom and is light-gray not background color. Also rare in appearance.
[2] For Outlook 2010 sometimes I get both a border bottom and border top, the top light gray and the bottom the color of my email background.
The lines appear to be more frequently showing, at bottom of row spans, especially where columns are empty (gutters). Uncollapsing these rows doesn't fix the issue either (in case you are thinking I should try this).
I have tried border:none; and border:1px solid transparent; also the usual background-color changes as many suggested and I can't get traction.
My design has alternating color blocks so a one color fix for background won't work.
The only solution that has improved the appearance is to mask (paint over the lines) by applying a border bottom inside the empty rows with a color that matches the background table color.
Such a time waster this bug.
Charles Robertson replied
OK. I tried the border-collapse solution and this didn't work. However, removing font-weight:bold or <strong> tags worked. And I have no idea why. Windows Mail clients are the weirdest, most annoying e-mail clients to design for!
Bobby Forcellina replied
I am experiencing what seems to be a similar problem with a 1px horizontal white line below a table/td. I figured out that this was only happening when adding a <br> or <br /> within the td. I still haven't found out a work around yet though... Example below.
<table class="container" border="0" cellpadding="0" cellspacing="0" width="247" bgcolor="#5f285e" style="border-spacing: 0; mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color:#5f285e;">
<tr>
<td align="left" valign="top" bgcolor="#5f285e" style="color: #ffffff; background-color:#5f285e; font-size: 18px; font-family:Arial, Helvetica, sans-serif; padding:20px 10px 20px 10px; text-align:center;">
<strong style="mso-font-size:18px;"><nowrap>TEST</nowrap></strong><br />
<span style="mso-font-size:16px;">TEST</span>
<td>
<tr>
</table>
How to Draw Lines in Outlook 2013
Source: https://litmus.com/community/discussions/4990-outlook-2016-1px-horizontal-lines-showing-up-in-the-body
Kathiravan Kumarasamy replied
Hi All,
Somehow we managed to get rid of the "1px Horizontal Lines Showing Up in the Email Body".
This is how we managed to solve the issue,
People who are facing the tiny line issue please use this technique and let us know if this works for you too...
Thank you all.
Your fix worked for my (hybrid fluid) email (without the Outlook 2016 specific style) - thanks! :D
Your fix worked for me. thank you
Thanks for sharing! Unfortunately it didn't work for my email today. I believe this method fixed the same issues for me before, but not today.
Kayla Piedimonte replied
Your fix worked! THANK YOU!
I found a few discussions about this very issue. I believe the fix will depend on how you've built your email, but I was seeing the lines appearing under a few random images.
The fix I used was to apply inline CSS - border-collapse: collapse - to the table containing the image and to increase the image pixel height by one. Feels like a hack, but it's appearing to work for me. Best of luck everyone.
Yes!!!! This WORKED.
Outlook 2016 (Version 1708, Build 8431.2236) on Win 10 PC was showing 1px gaps (they are gaps, not lines, I confirmed by changing the background color behind the table with the breakage).
Specifically, breaking down long tables into bite-sized ones inside a wrapper to prevent hitting that ~700px height is what worked for us. I'm not sure that the conditional code did anything except screw up some font styling because of the font-size:0px; line. Our templates have the border-collapse code in the head as is.
karthikeyan ravi replied
could u please give an example code
Accounts Payable replied
Thank you. The styles, particularly adding in font-size: 0px for the tr worked for me!
Stefano Bagnara replied
How do you create padding/spacing in your tables? Each "solution" works only for a specific email coding "style" so if you share the solution but not your template it will probably won't work.
If I add your code to my template (see the first message of this topic) my layout break.
Kathiravan Kumarasamy replied
Hi Stefano Bagnara,
Unfortunately i cant share the creative since it is highly confidential.
Here is the image representation of the HTML code
Image link of the code_before fixing the issue https://www.dropbox.com/s/crzgazg8n7x2g2h/issue_before.jpg?dl=0
Image link of the code_after fixing the issue https://www.dropbox.com/s/8v5blnmfp457oig/issue_after.jpg?dl=0
But, this is how we fixed the issue as of now.
After trying some trial and error method somehow we fixed the issue. What we did was
1. We wrapped the whole stacked tables into a single wrapper table with the width of the actual content table.
2. Place all the stacked tables into separate rows.
There might be something to this. I know this is purely anecdotal, but I also have my templates built within a single wrapper table and rows for each of the stacked section tables - and I've only encountered the Outlook 2016 line issue once (out of ~40 emails since I started watching this issue).
Hi Kathiravan, this worked for my template! Thanks for posting.
Andrea Striebel replied
This got rid of the line showing up but it got rid of one of my images as so it looks like in the litmus preview of android 4.4