Centered text in tables ignoring alignment properties on iOS devices

Hi all,

I have ran into an annoying problem, which seems to work fine on Outlook (phew) but not on the iPhone/iPad. We have a very simple 0-10 rating table, but the iOS devices seem to disregard the align properties. Has anyone else had this issue?

Any help or guidance on this would be much appreciated. Caused me too many headaches!

Cheers
Jody

Below is the code I have been using and a screenshot as to how it should look:

Screenshot previewing correctly:
http://www.theaccessgroup.com/media/1422287/picture_3.png

And here's the snippet of code concerned:
http://www.theaccessgroup.com/media/1422292/c12survey.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>    
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <style media="all" type="text/css">
        
        a:link, a:visited {
        color:#E5173F;
        text-decoration:none;}
        
        .redlinks{ color:#E5173F }
           .redlinks a span { color:#E5173F }
        
        .accessgreylinks{ color:#58585A }
        .accessgreylinks a span { color:#58585A }
        
        table td {border-collapse: collapse;}
        
        .ReadMsgBody {width: 100%;}
        .ExternalClass {width: 100%;}
        
        body { width: 100% !important; }
        
        -webkit-text-size-adjust: none;
          
        </style>
        
<title>30 seconds to tell us what you think?</title></head>

<body style="margin: 0; padding: 0;">
<div id="MainContainer" align="center">
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tbody><tr><td width="600" align="left" valign="middle">


<div id="Header" align="center">
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tbody><tr><td width="600" style="border:1px solid #ffffff">
<table width="600" cellpadding="0" cellspacing="0">
<tbody>
<tr><td height="10" width="10"><img height="10" width="10" alt="" src="http://www.theaccessgroup.com/email/spacer.jpg" style="margin: 0px; padding: 0px; border-style: none;" /></td></tr>


<tr><td height="10" width="10">&nbsp;</td>

<td width="245" valign="top"><a href="http://www.theaccessgroup.com?refid=C12SURVEY"><img height="42" border="0" width="150" style="color: #e5173f; font-family: Arial,Calibri,Verdana,Sans-serif; font-size: 30px;" alt="Access logo" src="http://www.theaccessgroup.com/email/NEWEMAIL/Access-logo-150px.jpg" /></a></td>

<td align="right" width="355" valign="top"><span style="font-family: Arial,Verdana,Calibri,Sans-serif; font-size: 10px;"><a href="http://www.theaccessgroup.com/contact-us/contact-us-form.aspx?refid=C12SURVEY" style="color: #58585a; text-decoration: none;">Contact us</a> <span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; color: #e5173f;">|</span> <a href="http://www.theaccessgroup.com//media/1171065/access_uk_ltd.vcf" style="color: #58585a; text-decoration: none;">Add us to your address book</a></span></td>


<td height="10" width="10">&nbsp;</td></tr>

<tr><td height="10" width="10"><img height="10" width="10" alt="" src="http://www.theaccessgroup.com/email/spacer.jpg" style="margin: 0px; padding: 0px; border-style: none;" /></td></tr>

</tbody></table></td></tr></tbody></table>
    
<table width="600" cellpadding="0" cellspacing="0">
<tbody><tr><td width="600" align="left" style="border-top:#58585a 1px solid; border-bottom: #58585a 1px solid;"><p style="font-family:Arial, Calibri, Verdana, Sans-serif; font-size:24px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585a">Take 30 seconds to tell us what you think - and you could win an iPad 2</p></td></tr></tbody></table></div>
                                              
                                                <!--    DOWNLOADS BAR    -->
  
<table width="600" cellpadding="0" cellspacing="0">
<tbody><tr><td width="600"><img src="http://www.theaccessgroup.com/email/spacer.jpg" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;" width="15" height="10" alt="empty" /></td></tr></tbody></table>
 
  
<table cellpadding="0" cellspacing="0" width="600">
<tbody><tr><td width="550" valign="middle" align="center"><div id="MainContent">
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:0px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">Dear Access Customer,</p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">At  Access, we’re committed to improving the products and services we provide. To  do this, we rely on you, our customer, to tell us how we’re performing and if we’re meeting your  expectations. All you have to do is answer the simple question below, and you’ll be entered into our <strong>free draw for an  Apple iPad 2</strong>.  </p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">After that, you’ll have the option to answer 4 further quick questions.</p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A"><strong>How likely is it that you’d recommend Access to a friend or colleague?</strong></p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">Please click on your selected rating below –  where 0 is not at all likely and 10 is extremely likely.</p><br />
    
    
    
<table align="center"><tbody><tr>
<td width="200"><p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:14px; margin:0px; color:#58585A"><strong>Not at all likely</strong></p></td>
<td width="200" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:10px; margin:0px; color:#58585A"><strong>&nbsp;</strong></td>
<td width="200"><p align="right" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:14px; margin:0px; color:#58585A"><strong>Extremely likely</strong></p></td></tr></tbody></table>
  
  
  <table cellspacing="0" cellpadding="0" border="0">

    <tbody><tr><td width="470" align="center"><table border="0" align="center" cellpadding="0" cellspacing="0">
      <tbody><tr align="center">
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=0" style="text-decoration:none; color:#e5173f">&nbsp;0&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=1" style="text-decoration:none; color:#e5173f">&nbsp;1&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=2" style="text-decoration:none; color:#e5173f">&nbsp;2&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=3" style="text-decoration:none; color:#e5173f">&nbsp;3&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=4" style="text-decoration:none; color:#e5173f">&nbsp;4&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=5" style="text-decoration:none; color:#e5173f">&nbsp;5&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=6" style="text-decoration:none; color:#e5173f">&nbsp;6&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=7" style="text-decoration:none; color:#e5173f">&nbsp;7&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=8" style="text-decoration:none; color:#e5173f">&nbsp;8&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=9" style="text-decoration:none; color:#e5173f">&nbsp;9&nbsp;</a></strong></p></td>
  
  <td width="22" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong>|</strong></p></td>
  
  <td width="30" height="50" valign="middle" align="center"><p align="center" style="font-size:26px; color:#58585a; font-family:arial, calibri, verdana, helvetica, sans-serif; margin:0px"><strong><a href="http://www.theaccessgroup.com/support/customer_survey_2011.aspx?cc=%%ContactRecid%%&co=%%CompRecid%%&amp;q1=10" style="text-decoration:none; color:#e5173f">&nbsp;10&nbsp;</a></strong></p></td>
  
  </tr></tbody></table></td></tr></tbody></table><br />
  <p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:10px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">Thank you, very much for helping us improve our products and services.</p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:0px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A"><img src="http://www.theaccessgroup.com/email/C12SURVEY/Chris-Bayne-signature.jpg" alt="empty" width="150" height="35" /><br />
  Chris Bayne<br />
<span style="font-size:10px;"><strong>CEO, Access UK.</strong></span></p>
<p align="left" style="font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:12px; line-height:18px; vertical-align:middle; margin-top:0px; margin-bottom:10px; margin-left:0px; margin-right:0px; color:#58585A">Your  data will be protected please click <a href="http://www.theaccessgroup.com/privacy--legal.aspx#privacy" style="color: #e5173f; text-decoration: none;"><strong>here</strong></a> to see our privacy statement.</p>
</div></td></tr></tbody></table>
    
    
<div class="BottomStrapline">


<table cellpadding="0" cellspacing="0" width="600">
<tbody><tr><td width="600" align="left" style="border-bottom:#58585a 1px solid;"><img src="http://www.theaccessgroup.com/email/spacer.jpg" alt="" width="15" height="10" style="margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;"/></td></tr></tbody></table>

<p  class="accessgreylinks" style="margin: 10px 0px 10px 0px; font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:10px; color: #58585A; text-align: left; line-height:14px">Access UK Ltd., a company registered in England and Wales, with registered number  2343760 and with its registered office at The Old School, Stratford St. Mary, Colchester, Essex CO7 6LZ, United Kingdom</p>
<p class="accessgreylinks" style="margin: 0px 0px 0px 0px; font-family:arial, calibri, verdana, helvetica, sans-serif; font-size:10px; line-height:14px; color: #58585A; text-align: left;">Access Accounting Ireland Limited, a company registered in Ireland, with registered number 243842 and with its registered office at Sky Business Centre, Port Tunnel Business Park, Clonshaugh Industrial Estate, Dublin 17, Ireland</p>
  </div></td>
</tr></tbody></table></div>
</body>
</html>
jodygibbons, 5 years ago

I have solved the problem! I added a &nbsp; non breaking line space, each side of the rating numbers to enlarge the click area (eg. &nbsp;0&nbsp;). However this was intrepreted differently on the iOS devices and overrode any alignment styles I found and moved all the text to the top of the td cell it occupied. I have subsequently removed these and it displays fine now, just in case someone runs into a similar issue.

Cheers
Jody

roshodgekiss roshodgekiss, 5 years ago

Hi Jody, thank you so much for sharing this fix with us! Definitely one to keep in mind if any of our customers run into similar alignment issues. Many thanks again and all the best with your campaign :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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

Get started for free
1-888-533-8098