Clients ask why mass emails sometimes create mal-formatted HTML when they send themselves a test and view within different readers (Gmail, Hotmail, Outlook etc). The answer is sometimes harder to explain than to just show. Below is an example of how and why you get different results. As you see while investigating the raw HTML in red. You'll see it starts with an outer <TD with a font. Next we have <FONT with a color assigned again followed by another <FONT color then <FONT size etc. This is called nested elements. Each element controls the next element and when they get misaligned readers don’t know how to handle the rendering properly. So how do you fix this? Well we have found a tool that seems to work well, but before you try it, please make a backup copy of your email template.
http://infohound.net/tidy/
For example the tidy tool link above will takes this html code:
<TD style="FONT-FAMILY: Georgia, 'Times New Roman', Times, serif"><FONT color=#04070c><FONT color=#04070c><FONT size=4><FONT color=#04070c>
<BLOCKQUOTE style="MARGIN-RIGHT: 0px" dir=ltr><FONT color=#000000><FONT size=3 face=Verdana>
<P><FONT face=Verdana><FONT size=3><FONT color=#000000><FONT size=3 face=Verdana>
Dear friends, Thank you for your interest… </FONT></P></FONT></FONT></FONT></FONT></FONT></BLOCKQUOTE></FONT></FONT></FONT>
</FONT></TD></TR></TBODY></TABLE></TD>
To this html code:
<td style="FONT-FAMILY:Georgia, 'Times New Roman', Times, serif ">
<blockquote style="MARGIN-RIGHT: 0px" dir="ltr">
<p>Dear friends, Thank you for your interest… </p>
</blockquote>
</td>
Now the tiny tool did a lot of the work for us. We still have some problems. As you can see in the red html code above, the most inner <FONT closest to the actual text is “Verdana” but the tidy cleaner left us with “FONT-FAMILY: Georgia, 'Times New Roman', Times, serif”, so let’s go ahead and replace the font manually.
Final revision with correct html formatting:
<td style="FONT-FAMILY:Verdana ">
<blockquote style="MARGIN-RIGHT: 0px" >
<p> Dear friends, Thank you for your interest… </p>
</blockquote>
</td>
