title: Layout different in all versions of IE
body: <p>I am having a very confusing problem. On <a href="http://ballardhardware.com/tradeshow" rel="nofollow">this site</a>, I have the header text lined up properly for all browsers except IE, where the text is raised up to the point where it leaves the header box. Even IE10 has this problem. Here is the code for my header:</p>
  
  <pre><code>header {
    margin-bottom: 30px;
    background: #272727;
    border-radius: 5px;
    padding-bottom: 3px; }
  
    header .center {
      width: 94%;
      margin-left: 5.5%; }
  
    header h1 {
      font-family: "Bebas", "Verdana", sans-serif;
      font-size: 1320%;
      float: left;
      width: 21%;
      margin-top: -18px;
      line-height: 102%;
      letter-spacing: -15px;
      color: #e85d00; }
  
    header .motto {
      font: 400% "Bebas", "Verdana", sans-serif;
      float: left;
      width: 78%;
      line-height: 102%;
      color: white; }
  </code></pre>
  
  <p>As far as I know, there's nothing in here that should give IE trouble, especially not IE10, which is supposed to be comparable to other modern browsers. Is there something I'm missing? Also, I have a font-face declaration for Bebas that works just fine, so that shouldn't be an issue.</p>