Home Resources Blog

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?

  • 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.

  • 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.

  • 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.

  • 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…

  • 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.

  • Ros Hodgekiss

    Nice tips guys – glad I’m not the only one who has been scratching their head over this!@Sean -. 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!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

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