[SOLVED] Gmail Renders HTML Email Incorrectly! Why? How Do I Fix It?

Amazon I have a server that sends out HTML newsletters to my subscribers. One day I was testing to see if how my HTML newsletter is rendered on Google Gmail. To my surprise, one part of the email was rendered incorrectly. Gmail inserts an unwanted newline in the email body which breaks a part of the HTML rendering. Also, sometimes the email is rendered in the wrong font color. Why does it occur to Gmail? How do I fix this issue?

This problem does not occur with Yahoo email clients.

Background

Eventually I found out what's going on. The following HTML snippet is rendered correctly on Gmail (^M is a newline):

想知道以下英文怎麼說嗎？<a style='color:black' target='_blank' href='http://www.chtoen.com/'>中英物語</a>告訴你！ ^M
<a title='冷笑話的英文怎麼說' class='' href='http://www.chtoen.com/%E5%86%B7%E7%AC%91%E8%A9%B1%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>>冷笑話</a> <a title='高峰的英文怎麼說' class='' href='http://www.chtoen.com/%E9%AB%98%E5%B3%B0%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>高峰</a> <a title='更扯的是的英文怎麼說' class='' href='http://www.chtoen.com/%E6%9B%B4%E6%89%AF%E7%9A%84%E6%98%AF%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>更扯的是</a> ^M
<a rel='nofollow' style='width:250px;-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) ) !important;background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% ) !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5bb0", endColorstr="#ef027d") !important;background-color:#ff5bb0 !important;-webkit-border-top-left-radius:6px !important;-moz-border-radius-topleft:6px !important;border-top-left-radius:6px !important;-webkit-border-top-right-radius:6px !important;-moz-border-radius-topright:6px !important;border-top-right-radius:6px !important;-webkit-border-bottom-right-radius:6px !important;-moz-border-radius-bottomright:6px !important;border-bottom-right-radius:6px !important;-webkit-border-bottom-left-radius:6px !important;-moz-border-radius-bottomleft:6px !important;border-bottom-left-radius:6px !important;text-indent:0 !important;border:1px solid #ee1eb5 !important;display:block !important;color:#ffffff !important;text-decoration:none !important;text-align:center !important;text-shadow:1px 1px 0px #c70067 !important;padding: 10px 0 10px 0 !important;margin: 0 auto !important;' class='buttonPink' target='_blank' href='http://vbtrax.com/track/clicks/1186/c627c2bf910729d8efcda67f8835ce13286e4bcb73fbb9b20a61b30d61?subid_1=email&subid_2=pink&subid_3=低蛋白餐'>還有問題？免費試聽外籍老師！</a> ^M

As you can see, there are three newlines above (a newline is denoted by ^M).

The following HTML snippet, however, creates the strange issue where there is an unsolicited break within the URL towards the end of the snippet:

想知道以下英文怎麼說嗎？<a style='color:black' target='_blank' href='http://www.chtoen.com/'>中英物語</a>告訴你！ ^M
<a title='立即生效的英文怎麼說' class='' href='http://www.chtoen.com/%E7%AB%8B%E5%8D%B3%E7%94%9F%E6%95%88%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>立即生效</a> <a title='補助的英文怎麼說' class='' href='http://www.chtoen.com/%E8%A3%9C%E5%8A%A9%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>補助</a> <a title='挺直的英文怎麼說' class='' href='http://www.chtoen.com/%E6%8C%BA%E7%9B%B4%E7%9A%84%E8%8B%B1%E6%96%87%E6%80%8E%E9%BA%BC%E8%AA%AA'>挺直</a> <a rel='nofollow' style='width:250px;-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;box-shadow:inset 0px 1px 0px 0px #fbafe3 !important;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d) ) !important;background:-moz-linear-gradient( center top, #ff5bb0 5%, #ef027d 100% ) !important;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5bb0", endColorstr="#ef027d") !important;background-color:#ff5bb0 !important;-webkit-border-top-left-radius:6px !important;-moz-border-radius-topleft:6px !important;border-top-left-radius:6px !important;-webkit-border-top-right-radius:6px !important;-moz-border-radius-topright:6px !important;border-top-right-radius:6px !important;-webkit-border-bottom-right-radius:6px !important;-moz-border-radius-bottomright:6px !important;border-bottom-right-radius:6px !important;-webkit-border-bottom-left-radius:6px !important;-moz-border-radius-bottomleft:6px !important;border-bottom-left-radius:6px !important;text-indent:0 !important;border:1px solid #ee1eb5 !important;display:block !important;color:#ffffff !important;text-decoration:none !important;text-align:center !important;text-shadow:1px 1px 0px #c70067 !important;padding: 10px 0 10px 0 !important;margin: 0 auto !important;' class='buttonPink' target='_blank' href='http://vbtrax.com/track/clicks/1186/c627c2bf910729d8efcda67f8835ce13286e4bcb73fbb9b20a61b30d61?subid_1=email&subid_2=pink&subid_3=痛風餐'>還有問題？免費試聽外籍老師！</a> ^M

As you can see, this snippet has two newlines in it.

The Cause of the Problem

It looks like Gmail does not like too much text without having a newline inside an HTML email body.

Solution

So the solution is in the HTML email body, before the email is sent, make sure each block of HTML markup, delimited by a newline (\n), does not contain too much text. How much is too much? I don't know. If you have the same problem where Gmail inserts weird characters into the HTML email body, simply insert newlines, or \n, in the HTML email body. Then send the HTML email to Gmail again. If it doesn't work, let me know!

When I say newline, I mean an actual line break in the raw text, not .

Questions? Let me know!