title: Display glitches with html emails sent from Java
body: <p>I am using the below code to send html emails, but somehow the output is coming different on different mailboxes. On gmail its coming fine, on yahoo,rediff,hotmail and ms outlook the whole layout gets break. </p>
  
  <p>How can all display be same irrespective of mail clients.</p>
  
  <pre><code>StringBuffer sb = new StringBuffer();
  
  sb.append("&lt;!DOCTYPE HTML&gt;");
  sb.append("&lt;html lang='en' style='height: 100%;'&gt;&lt;head&gt;");
  sb.append("&lt;meta http-equiv='X-UA-Compatible' content='chrome=1' /&gt;");
  sb.append("&lt;title&gt;UnRegisteredUser Invite&lt;/title&gt;");
  
  sb.append("&lt;style type='text/css'&gt;");
  sb.append("html {height: 100%;  }");
  sb.append("body {margin: 0;padding: 0;height: 100%;}");
  sb.append("&lt;/style&gt;");
  
  sb.append("&lt;/head&gt;&lt;body style='margin: 0;padding: 0;height: 100%;'&gt;");
  
  sb.append("&lt;div class='content' style='position: relative;width: 500px;height: 224px;z-index:1;margin-top: 10px;margin-left: 10px;border: .08em solid rgba(147, 184, 189,0.8);-webkit-box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),    0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;-moz-box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),  0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;box-shadow: 0pt 2px 2px rgba(105, 108, 109,  0.7),   0px 0px 2px 2px rgba(208, 223, 226, 0.4) inset;-webkit-box-shadow: 2px;-moz-border-radius: .1em;border-radius: .1em;'&gt;");
  
  sb.append("&lt;div class='email' style='clear: both;width: 500px;height: 122px;margin-left: 0%;margin-right: 0%;'&gt;");
  
  sb.append("&lt;div class='emailIMG' style='float: left;width: 125px;height: 122px;margin-left: 0%;margin-right: 0%;'&gt;");
  
  sb.append("&lt;img src='" +photoPath+ "' alt='' style='width: 100px;height: 100px;margin-left: 10px;margin-top: 10px;'/&gt;");
  sb.append("&lt;/div&gt;");
  
  sb.append("&lt;div class='emailContent' style='float: right;width: 375px;height: 122px;margin-left: 0%;margin-right: 0%;'&gt;");
  sb.append("&lt;div class='emailContent_placeholder' style='float: left;width: 375px;height: 22px;margin-left: 0px;margin-top: 10px;'&gt;");
  sb.append("&lt;label style='color: black;text-align: left;float: left;margin-top: 4px;font-size:.9em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'&gt;"+ inviter +" invites you for a video call on " +Constants.PRODUCT_TITLE+".&lt;/label&gt;");
  sb.append("&lt;/div&gt;");
  
  sb.append("&lt;div class='emailContent_videocall' style='float: left;width: 375px;height: 30px;margin-left: 0px;margin-right: 0%;margin-top: 10px;'&gt;");
  sb.append("&lt;a href='"+videoCallPath+"'&gt;&lt;img src='"+path+"img/vid_call.png' alt='' style='float: left;width: 100px;height: 30px;margin-left: 0px;margin-right: 0%;'/&gt;");
  sb.append("&lt;label style='color: black;text-align: left;float: left;margin-top: 4px;font-size:.9em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'&gt; Give "+ inviter +" now a call. &lt;/label&gt;");
  sb.append("&lt;/div&gt;");
  
  sb.append("&lt;/div&gt; ");
  sb.append("&lt;/div&gt;");
  sb.append("&lt;div class='marketing' style='clear: both;width: 500px;height: 102px;margin-left: 0%;margin-bottom: 10px;'&gt;");
  sb.append("&lt;span style='color: black;text-align: left;float: left;margin-top: 4px;margin-left: 10px;font-size: 1em;font-family: Courier ;font-weight:bold;color: #4E4E4E;'&gt;");
  sb.append("&lt;p&gt;You can register a free account &lt;span&gt;&lt;u&gt;&lt;a href='"+url+"'&gt;here&lt;/a&gt;&lt;/u&gt;&lt;/span&gt;.&lt;/p&gt;");
  sb.append("&lt;p&gt;You can use video chat for free. No installation or registeration is required.&lt;/p&gt;");
  sb.append("&lt;/span&gt;");
  sb.append("&lt;/div&gt;");
  sb.append("&lt;/div&gt;");
  
  sb.append("&lt;/body&gt;&lt;/html&gt;");
  
  String htmlBody = sb.toString();
  </code></pre>