iPhone fail: The trouble with table borders and HTML email

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

Posted by Ros Hodgekiss

10 Comments

  • Sean
    25th October

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

  • Roy
    25th October

    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.

  • Jarrod
    25th October

    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.

  • Ros Hodgekiss
    26th October

    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 1x1 table to preserve the padding, but remove the need for multiple cells. Hope this helps!

  • Chris Vann
    27th October

    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.

  • Werbeagentur
    24th November

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

  • bg
    1st December

    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.

  • paul
    2nd December

    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…

  • Ros Hodgekiss
    2nd December

    @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
    21st December

    This issue exists on iOS with webpages not just email.

Sign up for free.
Then send campaigns for as little as $9/month

Create an account