title: Why does my email look like s**t in outlook?
body: <p>I am working on an email right now, which is mostly based on images. The email looks good if you open it with the browser, but very bad, if opened with Outlook. I heard that Outlook uses some sort of rendering process. Is that true? What can I do to protect my email from getting smashed? </p>
  
  <p>Have a look at my email: <a href="http://www.s4ea.org/invite.html" rel="nofollow">http://www.s4ea.org/invite.html</a></p>
  
  <p>Were my email does and does not work: <a href="https://litmus.com/tests/16706239/versions/1/screenshots" rel="nofollow">https://litmus.com/tests/16706239/versions/1/screenshots</a></p>
  
  <p>My code: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Invitation&lt;/title&gt;
  &lt;style&gt;
  
  @charset "utf-8";
  /* CSS Document */
  
  .wrapper {
      width:30%;
      margin-left:auto;
      margin-right:auto;
  }
  
  .slim {
      background-color: #B63538;
      margin:0 0 2px 0;
  }
  
  .logo {
      margin:0 0 0 0;
      padding:0 0 0 0;
  }
  
  .logo img {
      width: 100%;
      height:auto;
  }
  
  .text {
      margin:2px 0 0 0;
      padding:0 0 0 0;
  }
  
  .text img {
      width:100%;
      height:auto;
  }
  
  .facebook {
      margin:2px 0 0 0;
  }
  
  .facebook img {
      width: 100%;
      height:auto;
  }
  
  .contact nav ul {
      list-style:none;
  }
  
  .sports { 
      margin:2px 0 0 0;
  }
  
  .sports img {
      width:100%;
      height:auto;
  }   
  
  .contact {
      background-color:#fb9648;
      height:auto;
      margin:2px 0 0 0;
      padding-top:10px;
  }
  
  .contact img {
      padding-left:12%;
      margin-bottom:5%;
  }
  
  .contact nav {
      background-color: #fb9648;
      height:50px;
  }
  
  .contact nav ul .bild, .contact nav ul .text, .contact nav ul .spacer {
      margin:0 0 0 0;
      display:inline;
      float:left;
  }
  
  .bild {
      width:15%;
      height:auto;
  }
  
  .contact nav ul .bild img {
      width: 40px;
      height:auto;
  }
  
  .contact nav ul .spacer {
      width: 5%;
  }
  
  .contact nav ul .text {
      height:40px;
      width: 30%;
  }
  
  @media only screen and (min-width: 10cm) and (max-width: 18cm)
  {
  
      .wrapper {
          width:80%;
      }
  
  
  
  }
  
  @media only screen and (min-width: 1cm) and (max-width: 10cm)
  
  {
      .wrapper {
          width:100%;
      }
  
      .contact img {
          width:80%;
          margin-bottom: 2%;
      }   
  
  }
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="slim"&gt;&amp;nbsp;
  
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="logo"&gt;
          &lt;a href="http://www.taste4sports.com" target="_blank"&gt;
              &lt;img src="http://www.taste4sports.com/images/logo_email.jpg"  /&gt;
          &lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="text"&gt;
      &lt;a href="http://www.taste4sports.com" target="_blank"&gt;
          &lt;img src="http://www.s4ea.org/images/text4.jpg" /&gt;
      &lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="facebook"&gt;
      &lt;a href="https://www.facebook.com/SPORTS4ea?ref=ts&amp;fref=ts" target="_blank"&gt;
          &lt;img src="http://www.s4ea.org/images/facebook7.jpg" /&gt;
      &lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="sports"&gt;
          &lt;a href="http://www.s4ea.org" target="_blank"&gt;
              &lt;img src="http://www.taste4sports.com/images/support.jpg" /&gt;
          &lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="wrapper"&gt;
      &lt;tr&gt;
      &lt;td class="contact"&gt;
          &lt;img src="http://www.taste4sports.com/images/contact/phone.jpg" /&gt;
          &lt;img src="http://www.taste4sports.com/images/contact/fax.jpg" /&gt;
              &lt;a href="http://www.taste4sports.com" target="_blank"&gt;
                  &lt;img src="http://www.s4ea.org/images/internet_back2.jpg" /&gt;
              &lt;/a&gt;
          &lt;a href="mailto:clara@s4ea.org"&gt;
              &lt;img src="http://www.s4ea.org/images/@.jpg" /&gt;
          &lt;/a&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>