Composing an HTML email we’ve encountered an odd issue where indents appear inside spans for no apparent reason.
I’ve included the HTML below, but as far as I can see there is no padding, margin, etc applied to the spans. None of the inline styles seem like they could be the cause. Assuming I’m missing something very basic here.
Indents to the left of the bottom two phone numbers:
(picture is from a Windows 7 HTC phone test from the Litmus email testing app)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta name="robots" content="noindex,nofollow" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (max-device-width: 480px) {
body img.banner {max-width: 300px !important; height: auto !important;}
table {max-width: 300px overflow:visible; width: auto; }
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
span { padding: 0; margin: 0; }
.appleLinks a {color:#400400; text-decoration:none;}
.appleLinksGray a:link,.appleLinksGray a:visited {color:#808080;}
.appleLinksGrayClean a:link,.appleLinksGrayClean a:visited {color:#808080; text-decoration:none;}
</style>
</head>
<body style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 12px;">
<table style="background-color: #ffffff; margin: auto; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="627">
<tbody>
<tr>
<td colspan="2"><img class="banner" src="" alt="Alt" width="625" height="100" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: left; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-top: 20px; color: #400400;"><p>Dear ~goesBy~,<br />
<br>
Text</p>
<p>Regards,<br>
Text
<br>
<br>
</p>
<p><span class="appleLinks">Address<br>
<br>
5:00 – 7:00 pm
</span></p>
<p><b style="font-family: arial, helvetica, sans-serif; color:#000;">Name<br />
</b><span style="font-family: arial, helvetica, sans-serif; white-space: nowrap; color: #808080; font-size: 8pt;">Manager<br />
<br />
</span><b><span style="font-family: 'times new roman', times, serif; color: #00644c; font-size: 10pt;"><br />
COMPANY </span></b><br />
<span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 1</span><br />
<span class="appleLinksGrayClean" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">Address Line 2</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 direct</span><br />
<span class="appleLinksGray" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;">111.111.1111 mobile</span><br />
<a href="mailto:person@example.com" style="font-family: arial, helvetica, sans-serif; color: #808080; font-size: 8pt;"><span class="appleLinksGray" >person@example.com</span></a></p></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="2">
<div style="text-align: left; font-family: verdana; color: #333333; font-size: 9px;">Copyright</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Did you check for hidden characters? Sometimes when you copy paste code, special characters get included. Mostly from a character set difference. Try deleting all white space between the html tags.