We recently come across a strange email client rendering issue in Mail on the iPhone and iPad – hairline borders are appearing in HTML email designs with table layouts. These borders are sometimes barely visible, but often they can be fairly pronounced, especially at certain zoom levels (see picture). What makes this bug so hair-pullingly tricky is that the borders appear and disappear as you zoom in and out of the HTML email, which can quickly take a design from passable, to impossible.

When do these borders appear?

We’ve found that the borders appear when a background color or image is applied to individual table cells. In this example, we’ve nested a table with white cells (eg. bgcolor=#FFFFFF) in a table with a red background color. As a result, the red is showing through, creating these borders.

Solving the border dispute

To prevent these borders from appearing on the iPhone, you can try:

  1. Removing background colors or images from individual table rows and cells, and/or;
  2. Nesting the problematic table in a new table, featuring a background color that matches that of the inner table.

Borders in iPhone MailIn this example, the red borders disappeared when the white table cells were nested in a 1×1 cell table with a white background color applied… Not an entirely elegant solution, but we’re coding with tables here, right?

It seems like this issue has been floating around well before the release of iOS5, however for some reason, has become fairly visible now. Hopefully Apple takes notice and takes steps to fix this rather obvious rendering glitch, thus restoring their otherwise designer-friendly email client in our good books.

I know, I know, it’s a bit of a downer, this one. To cheer you up, here’s a video featuring levitation and quantum superconductors. Hover boards are on their way…

  • Sean

    Great bug fix, this has been annoying me for a while, can you post a before / after of some sample code please, if possible?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    Nice tips guys – glad I’m not the only one who has been scratching their head over this!

    @Sean – Here’s a link to the above email. As Roy and Jarrod have mentioned, there are a couple of solutions like removing unnecessary cells – in this very simple case I’d just use cellpadding. Alternately, I’d wrap the text in its own 1×1 table to preserve the padding, but remove the need for multiple cells. Hope this helps!

  • http://redhoteshot.com Roy

    Solution number 3. Target problematic TD’s with media queries and remove/recolour outer elements’ background colours.

    Solution number 4. Reshuffle the message to be 320px wide on iPhones using media queries. Then there’s no need to zoom in first place, everything is shown 2:1 ratio so maps perfectly.

  • http://www.purchasedigital.com.au Jarrod

    Nice find guys, happy you found a solution before we ran in to the problem.

    I agree with Roy on option 4, but these lines are sometimes visible without zooming in at all.

    Solution 5? If possible, avoid using nested table, use individual rows to achieve the same result.

  • Chris Vann

    This isn’t a bug, AFAIK. In fact, it’s been used extensively back in the HTML 4.0 days to produce cleaner 1 pixel borders around table cells. It’s generally avoidable if you set the cellspacing attribute of the nested table to 0.

  • paul

    but does this solution just deal with background colors? what if your cells contain images?

    I get this when my html email has been cut up with cells having different images in them…

  • http://www.agentur-steckenpferd.de/ Werbeagentur

    thank you! This bug fix was the solution to our problem.

  • bg

    I’ve been dealing with this issue for years now. It mostly happens when white cells are on a dark background. I’ve set the cellspacing to 0. I’ve added extra CSS to the cells. That didn’t work. What usually works is trying to eliminate extra cells and if your layout is one column, try to do the whole layout in one cell if possible. Adding CSS padding to a table cell and eliminating spacer cells helps as well. Lots of trial and error but I can usually remove most or all of the lines that show up on the iPhone/iPad.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    @paul – I’m not sure how images would make a difference, however we’d be curious to see what’s happening here. If you have a spare moment, could you kindly pass on your code to our team? We’d be keen to take a look :)

  • Me

    This issue exists on iOS with webpages not just email.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free