title: What is the problem with this HTML in my email?
body: <p>I cant seem to get the email to display correctly in hotmail and gmail (see attached image) but it all works fine in my client. </p>
  
  <p>What is the problem with my code/Or is this an issue with gmail/htmail?</p>
  
  <blockquote>
    <p></p>
  </blockquote>
  
  <ul>
  <li><strong>How it does look:</strong></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/SRmGj.png" alt="alt text"></p>
  
  <p><strong><em>How it should look:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/Vdjir.png" alt="alt text"></p>
  
  <p>code:</p>
  
  <pre><code>    &lt;html&gt;
  
  &lt;STYLE&gt;
  #header
  
  {
  top:20px;
  position: absolute;
  left:101px;
  width: 540px;
  font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #999;
  height: 110px;
  }
  
  #logo a
  
  {
  position: relative;
  left: -40px;
  }
  
  #bookname
  
  {
  position: relative;
  top: 5px;
  font-size: 20px;
  background: #B0E2FF;
  font-weight: bold;
  color: #666;
  text-decoration: none;
  }
  
  #book_description
  
  {
  font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
  font-size: 95%;
  }
  
  .numba
  
  {
  background: #FF6347;
  color: #ffffff;
  position: relative;
  top: 40px;
  font-size: 20px;
  font-weight: bold;
  width: 23px;
  }
  
  .numba10
  
  {
  background: #FF6347;
  color: #ffffff;
  position: relative;
  top: 40px;
  font-size: 20px;
  font-weight: bold;
  width: 38px;
  }
  
  #main_body
  
  {
  position: absolute;
  left: 101px;
  top: 140px;
  width: 540px;
  height: 1690px;
  font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
  border-bottom: 1px solid #999;
  font-weight: 95%;
  }
  
  #key
  
  {
  position: relative;
  top: 40px;
  font-size: 20px;
  background: #ff9;
  font-weight: bold;
  color: #666;
  width: 291px;
  }
  
  .p1
  
  {
  position: relative;
  top: 34px;
  font-size: 95%;
  }
  
  .pcl
  
  {
  position: relative;
  top: 57px;
  font-size: 95%;
  }
  
  #close
  
  {
  position: relative;
  top: 51px;
  font-size: 20px;
  background: #ff9;
  font-weight: bold;
  width: 126px;
  color: #666;
  }
  
  #link_buy_amazon
  
  {
  color: #27AAE1;
  font-weight: bold;
  }
  
  #footer
  
  {
  font-family: 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
  left: 101px;
  color: #666;
  font-size: 15px;
  position: absolute;
  top: 1850px;
  width: 540px;
  }
  
  #unsub
  
  {
  background: #ff9;
  color: #666;
  }
  
  #Forwardthis
  
  {
  background: #ff9;
  color: #666;
  position: absolute;
  top: 22px;
  left: 435px;
  }
  
  #Blurb_author
  
  {
  color: #27AAE1;
  font-weight: bold;
  }
  
  #forwardit {background: #CAE7FB;
  color: #666;}
  
  img
  {  
  border-style: none;
  }
  
  &lt;/STYLE&gt;
  
  
  &lt;body&gt;
  
  &lt;div id='header'&gt;
  
  &lt;a id ='Forwardthis' href="*|FORWARD|*"&gt;Forward This&lt;/a&gt; 
  
  &lt;a id ='logo' href='http://Blurb.fm'&gt;&lt;img src='http://img844.imageshack.us/img844/6943/blurblogo1.png'&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id ='main_body'&gt;
  
  &lt;a id='bookname' href='http://www.amazon.com/How-We-Decide-Jonah-Lehrer/dp/0618620117'&gt;How We Decide by Jonah Lehrer&lt;/a&gt;
  &lt;/br&gt;&lt;br&gt;
  &lt;div id='book_description'&gt;
  This book is about our two brains. Our logical brain and our emotional brain. What it suggests is that the emotional brain, "our gut" as some would call it, is actually smarter
  than our logical brain. The author puts forward a lot of great insights to prove this point.
  &lt;/div&gt;
  &lt;br&gt;
  Blurb Made By: &lt;a id='Blurb_author' href='http://twitter.com/taphangum'&gt;Tapha Ngum&lt;/a&gt;
  &lt;div id='key'&gt;Key Ideas From The Book&lt;/div&gt;
  &lt;p class='numba'&gt;1.&lt;/p&gt;
  &lt;p class='p1'&gt;
  When you feel that you are 'drawn' to something. It is actually because your mind has already decided that it wants that thing. All alternatives have 
  been assessed and a decision has already been unconciously made.
  &lt;/p&gt;
  &lt;p class='numba'&gt;2.&lt;/p&gt;
  &lt;p class='p1'&gt;
  Feelings are quite often a very accurate shortcut to use in making a decision. They have years upon years of experience to rely on. "They already know how to do it" as the author says.
  &lt;/p&gt;
  &lt;p class='numba'&gt;3.&lt;/p&gt;
  &lt;p class='p1'&gt;
  The ideal environment for the best decision making is usually one where there are a good variety of opinions all simulataneously being shared openly.
  &lt;p class='numba'&gt;4.&lt;/p&gt;
  &lt;/p&gt;
  &lt;p class='p1'&gt;
  The best decision makers rarely get down on the decision they have made. Instead they become "students of error", determined to know what went wrong so that next time they will do better.
  &lt;p class='numba'&gt;5.&lt;/p&gt;
  &lt;/p&gt;
  &lt;p class='p1'&gt;
  The mind is full of flaws, but they can usually be outsmarted. 
  &lt;p class='numba'&gt;6.&lt;/p&gt;
  &lt;/p&gt;
  &lt;p class='p1'&gt;
  The best way to make sure your brain is working properly is to study your brain at work. To listen to the internal conflict going on inside your head.
  &lt;/p&gt;
  &lt;p class='numba'&gt;7.&lt;/p&gt;
  &lt;p class='p1'&gt;
  Your goal as a person should be to learn from mistakes when they dont count. So that when they do you're prepared to do it the right way. A good example of this is Flight school simulators. They allow the pilot to
  have the full emotional experience of being in a plane without the risk of any real danger.
  &lt;/p&gt;
  &lt;p class='numba'&gt;8.&lt;/p&gt;
  &lt;p class='p1'&gt;
  Even though the emotional brain is very often accurate it does not actually mean that it can always be trusted. It also can sometimes be "impulsive and short-sighted" and "A little too sensitive to patterns" . 
  &lt;/p&gt;
  &lt;p class='numba'&gt;9.&lt;/p&gt;
  &lt;p class='p1'&gt;
  People often think that more information is always better. But more often than not when you give the brain too many facts "Your asking for trouble". Doin this leads to buying the wrong items at walmart for example. Or picking the
  wrong stocks. 
  &lt;/p&gt;
  &lt;p class='numba10'&gt;10.&lt;/p&gt;
  &lt;p class='p1'&gt;
  After a group of black students did worse on their I.Q. tests than white students. (Psychologist) Claude Steel set another test. But this time it was described as a preparatory drill instead of a measure of
  intelligence (this point was stressed). What ended up happening was that the I.Q scores of both black and white students were virtually idntical. The achievement gap in that instance had been closed.   
  &lt;/p&gt;
  &lt;div id='close'&gt;Conclusion&lt;/div&gt;
  &lt;p class='pcl'&gt;
  Gaining a better understanding of the human mind has always been one of my great interests, so this book was always going to get high ratings from me. But even so, this really does give you huge
  insight into how we as human beings think and decide. It does get VERY specific at times but in all, this book is definitely one to buy.   
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id='footer'&gt;
  
  *|LIST:DESCRIPTION|* &lt;br /&gt;
  &lt;br /&gt;
  &lt;a id='unsub' href="*|UNSUB|*"&gt;Unsubscribe&lt;/a&gt; &lt;b&gt;*|EMAIL|*&lt;/b&gt; from this list.&lt;br /&gt;
  
  &lt;br /&gt;
  Our mailing address is:&lt;br /&gt;
  &lt;br&gt;
  &lt;b&gt;*|LIST:ADDRESS|*&lt;/b&gt;&lt;br /&gt;
  &lt;br /&gt;
  Copyright (C) 2010 &lt;b&gt;*|LIST:COMPANY|*&lt;/b&gt; All rights reserved.&lt;br /&gt;
  &lt;br /&gt;
  Sharing is caring! So forward this email to someone you KNOW will love it :). 
  &lt;br&gt;&lt;br&gt;
  &lt;a id='forwardit' href="*|FORWARD|*"&gt;Click Here To Forward&lt;/a&gt; 
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>[3]: <a href="https://i.stack.imgur.com/rzTfP.pngHow" rel="nofollow noreferrer">http://i.stack.imgur.com/rzTfP.pngHow</a> it should look:</p>