The most common HTML email rendering issues

rendering issues in html email.doc

The most common HTML email rendering issues
Text not rendering at full height
If your text is not rendering at the correct height in a majority of email clients, you have probably not set a line-height on your surrounding td.  
•	line-height is set to 6px more than my font-size
•	gives a nice amount of spacing between the text making it much easier to read and of course rendering your text correctly in all email clients

Content not aligning correctly
•	because you haven’t added align=”” to your surrounding td
Yahoo align center
•	Yahoo usually makes parts or the whole email align to the left
•	Just put align=”center” on the parent td to fix

Yahoo app responsive : 

18th May 2018: I learned never put comments in media queries:

*You need to copy whole CSS in BODY section which you have defined in HEAD part.
*There should be no comments in CSS style, otherwise it will not render responsive. Because *Yahoo App ignores the CSS after the comments, that's why it must not be included in CSS style.
Please do not use nested classes.

Images not rendering at correct size
<img src="" width="" height="" style="margin:0; padding:0; border:none; display:block;" border="0" class="imgClass" alt="" />

Outlook 2013 is adding extra spacing to my spacers
•	You can replace the <p> with a <span> if needs be, as <span> doesn't come with any 'free' padding.
•	add extra spacing to your spacers to stop this we add the following code between our td’s

White spaces between images in outlook.com :

•	add style="font-size: 1px; line-height: 1px;" height="1" to td


white line issue in outlook : 

use before tr
 <!--[if gte mso 9]><tr><td align='center' style='padding:0 0 0 0;text-align:center;font-size:0px;' valign='top'>&nbsp;</td></tr><![endif]--> 


•	put all tr's in one table andf give bakground color




GMAIL line height issue in font - font bigger size:
Add 
 -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;line-height: 100%;

to 
<td>



 Windows Phone 8 Support
•	You can get your media queries to work on the Windows Phone by adding the following meta tag to the head tag of your template.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
1
<meta http-equiv="X-UA-Compatible" content="IE=edge" />


Always use unicode charecters
HTML email clients don’t understand plain typed out symbols such as £ $ * so we need to replace these symbols with unicode. You can grab these unicodes at : http://www.amp-what.com


Messaging Clipping
Sometimes your full email might not display in litmus tests. This is due to message clipping, once your email code reaches 100KB+ it will clip your email and only show what it can.
Gmail clips message at 100KB & iOS at 20-20KB (Without WIFI).


Preheader Pre- header:


<div style="display:none; font-size:0px; color:#ffffff; line-height:0px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
The Right Gear for Gym2Pool Training...   &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;</div>