The attached image shows a 585px table email where the displayed address (with "smart" address link added by iOS) extending past the table width.
Anyone have a clue why this happens? I checked code validation (passed), made sure the nested table was properly closed, and it's parents were properly closed, and can find no anomallies otherwise. This is the only system/client it proved problematic upon. Is this possibly a "feature" of iPhone display re-sizing content to fit screen (585px in this instance) but because an HTML5 or specific application feature to assist in location detection has been implemented, the content is stripped from table cell?
I'm stumped. Thanks.
Code:
<!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" />
<title>Title</title>
</head>
<body>##OPENTAG##
<table width="585" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="560" colspan="2" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px; color:#000000;">If you cannot view this message, <a href="##VIEWINBROWSERTAG##2000##ArgDelimiter##eu=##_MS_ORG_ID####ArgDelimiter####ArgDelimiter####ArgDelimiter###vib" target="_blank" style="color:#00425F; text-decoration:underline;">click here</a>.</td>
<td width="25" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="10" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="10" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="10" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="585" colspan="3" bgcolor="#85cddb" style="color: #ffffff;"> </td>
</tr>
<tr>
<td width="585" height="16" colspan="3" bgcolor="#ffffff" style="color: #ffffff;"> </td>
</tr>
<tr>
<td width="35" bgcolor="#ffffff"> </td>
<td width="525" bgcolor="#ffffff" style="font-size: 13px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; color: #000000">Body text goes here
</td>
<td width="25" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="585" colspan="3" bgcolor="#ffffff"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35" height="5" bgcolor="#cccccc" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="5" bgcolor="#cccccc" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="5" bgcolor="#cccccc" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" bgcolor="#ffffff"> </td>
<td width="525" bgcolor="#ffffff" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000" valign="middle">Links go here</td>
<td width="25" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" bgcolor="#ffffff"> </td>
<td width="525" align="left" bgcolor="#ffffff"> Social bar insert goes here</td>
<td width="25" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" bgcolor="#ffffff"> </td>
<td width="525" bgcolor="#ffffff" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000"> Please do not reply to this e-mail message. Contact us with your questions and comments about our services:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="60" height="10" style="font-size: 1px; line-height:1px"> </td>
<td width="465" height="10" style="font-size: 1px; line-height:1px"> </td>
</tr>
<tr>
<td width="60" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000; font-weight:bold;">U.S. Mail:</td>
<td width="465" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000;">Addressee, Inc., P.O. Box 555555, <span style="white-space:nowrap">Anytown, ST 55555-5555</span></td>
</tr>
<tr>
<td width="60" height="3" style="font-size: 1px; line-height:1px"> </td>
<td width="465" height="3" style="font-size: 1px; line-height:1px"> </td>
</tr>
<tr>
<td width="60" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000; font-weight:bold;">Phone:</td>
<td width="465" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#000000;"><span style="white-space:nowrap">1-800-555-5555</span></td>
</tr>
<tr>
<td width="60" height="10" style="font-size: 1px; line-height:1px"> </td>
<td width="465" height="10" style="font-size: 1px; line-height:1px"> </td>
</tr>
</table>
Our company will never ask for personal information, such as Social Security or login information, <span style="white-space:nowrap">in an e-mail.</span></td>
<td width="25" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="10" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="35" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" bgcolor="#ffffff"> </td>
<td width="525" bgcolor="#ffffff" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 9px; color:#666666;"> <br />
</td>
<td width="25" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
<tr>
<td width="35" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="525" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
<td width="25" height="15" bgcolor="#ffffff" style="font-size:5px; line-height:5px;"> </td>
</tr>
</table>
</body>
</html>