Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
iPhone 3.0 White Gaps

Cross Media

Newbie
Total Posts:  4
Posted: 07 February 2012 10:27 AM

Hello all, wondering I could receive some insight into a problem I’m having.

I have an email template that I’ve passed through the acid test a few times and is now working perfectly in all of the major desktop browsers. I am now having an issue with the iPhone 3.0 version and there doesn’t seem to be any mention of a fix in the client tips and tricks. I am getting white gaps at the bottom of my email (which I believe is to do with the images), much in the same way that you get in GMail and Hotmail, but I have applied the fixes for those already and the gaps have been removed.

Can anyone give me an idea as to something I can do for iPhone that will have the desired effect?

Many Thanks


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 07 February 2012 06:26 PM
[ # 1 ]

Cross,

Are you referring to hairline spaces between images?  Here’s an article that might help:

The Trouble With Table Borders in HTML Email

We’ve found that if you zoom in and out, the spacing is eliminated.  In the article above, Campaign Monitor provides some helpful tips for resolving the issue.

Let me know if this helps!
Miki


 

Cross Media

Newbie
Total Posts:  4
Posted: 08 February 2012 08:36 AM
[ # 2 ]

Hi Michelle,

The issue I am having isn’t like the one you mentioned, there is one large gap, about an inch thick between the footer image and the left and right images, however in other browsers this has been rectified, using the line height fix for hotmail and the style block fix for gmail.

I hope this is clearer,

Thanks


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 08 February 2012 03:29 PM
[ # 3 ]

I’d be happy to check into it for you.  Is there any way you can post a link to the email in question on this forum thread?

Cheers!
Miki


 

Cross Media

Newbie
Total Posts:  4
Posted: 08 February 2012 04:16 PM
[ # 4 ]

 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 08 February 2012 05:54 PM
[ # 5 ]

Ah, OK, are you referring to the white gaps to the left and right near your footer?

Yes, what’s happening, is that the iOS and the Android re-scale your fonts to be bigger. 

Here is what will resolve the issue in all clients:

Add a background attribute (not style, this is for Gmail) to each of the TD’s that contain your drop shadows to the left and right.

For example:

<td width="92" valign="top" 
background="http://www.crossmediacomms.com/dan/backbone/2/images/Left1.jpg">
<
img height="960" border="0" width="92" style="display:block" alt=""
 
src="http://www.crossmediacomms.com/dan/backbone/2/images/Left1.jpg">
</
td

This will cause the background to repeat so that you don’t see any extra space before the footer in the mobile devices. I left the original image inside the cell for Outlook 2007/2010.


 

Cross Media

Newbie
Total Posts:  4
Posted: 09 February 2012 09:15 AM
[ # 6 ]

That’s fantastic Miki.

Thank you for your help.