title: Gmail is breaking my email template CSS, how can I stop this?
body: <p>I'm currently working on an email template to send out via mailchimp and I've noticed that whenever I test the email in Gmail the css is broken. If I check the email in any other client it works correctly. </p>
  
  <p>This is what the email is supposed to look like; <a href="http://puu.sh/8ic4G.jpg" rel="nofollow">http://puu.sh/8ic4G.jpg</a></p>
  
  <p>This is what it looks like in Gmail; <a href="http://puu.sh/8ic6L.jpg" rel="nofollow">http://puu.sh/8ic6L.jpg</a></p>
  
  <p>At first I thought it may be because I was using a  tag in the  section, which I read Gmail didn't support - though I've reworked the css inLine, which should have fixed it - as far as I'm aware.. Please help!</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body style="background-image: url(http://www.lightbulb.im/BSC/MonthlySapphireBackground.png);background-repeat: no-repeat; display: block;"&gt;
      &lt;div class="mainContainer" style="display: block;width: 900px;height: 1600px;"&gt;
          &lt;div class="containerLatest" style="position: relative;top: 29%;left: 5.7%;width: 90%;height: 150px;border: 1px solid transparent;"&gt;
  
              &lt;p class="standard" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #ffffff;"&gt;Lisoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui ouscia deserunt mollit anim id est laborum." &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="containerChoice" style="position: relative;top: 33.5%;left: 5.7%;width: 70%;height: 150px;border: 1px solid transparent;"&gt;
              &lt;p class="heading" style="text-align: left;font-family: 'Futura', 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;font-weight: bold;text-shadow: #333 0px 0px 1px;letter-spacing: 0.05em;font-size: 12pt;text-transform: capitalize;color: #ffffff;"&gt;Cool stone&lt;/p&gt;
              &lt;p class="choice" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #ffffff;"&gt;isoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                  ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat.   &lt;/p&gt;
          &lt;/div&gt;
  
  
          &lt;div class="containerSpecial" style="position: relative;top: 54.3%;left: 5.7%;width: 60%;height: 149px;border: 1px solid transparent;"&gt;
              &lt;div class="spacer" style="height: 55%;float: right;"&gt; &lt;/div&gt;
              &lt;div class="block" style="float: right;clear: right;bottom: 0%;right: 0%;width: 25%;height: 40%;background-color: #252d37;"&gt;&lt;p class="boxS" style="text-align: center;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #333 0px 0px 1px;font-weight: 600;line-height: 20%;font-size: 10pt;letter-spacing: 0.05em;color: #ffffff;"&gt;was $300&lt;/p&gt;&lt;p class="boxH" style="text-align: center;font-family: 'Futura', 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;font-weight: bold;text-shadow: #333 0px 0px 1px;letter-spacing: 0.05em;font-size: 12pt;line-height: 90%
          text-transform: capitalize;color: #ffffff;"&gt;NOW $100!&lt;/p&gt;&lt;/div&gt;
              &lt;p class="inverted" style="text-align: left;font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica;text-shadow: #000 0px 0px 0.5px;font-weight: 600;font-size: 11pt;letter-spacing: 0.05em;color: #252d37;"&gt;Isoums "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                  dolor in reprehenderit in voluptate velit esse cillum dolo&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="linkContainer" style="position: relative;top: 31%;left: 12.1%;width: 673px;height: 63px;border: 1px solid transparent;"&gt;&lt;a class="priceList" href="http://google.com" style="float: left;width: 232px;height: 62px;"&gt;&lt;/a&gt;&lt;a class="stockList" href="http://yahoo.com" style="float: right;width: 232px;height: 62px;"&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="specialImage" style="position: relative;left: 100%;top: 36.4%;margin-left: -308px;width: 306px;height: 214px;background-image: url(http://www.lightbulb.im/BSC/specialGem.png);border: 1px solid transparent; display: block;"&gt;&lt;/div&gt;
          &lt;div class="clear" style="clear: left;"&gt;&lt;/div&gt;
      &lt;/div&gt;
          &lt;a href="*|UNSUB|*"&gt;
      &lt;/a&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>