title: Navbar Centered In FF 22 Chrome 27 but Not IE 8
body: <p>My Navigation bar is centered and works perfectly in Firefox 22 and Chrome 27 but not IE 8, I hate to be that guy but what gives?? Wouldn't it be great if everything just played nice, if this wasn't work related I wouldn't care, but we are stuck using IE. Is there some kind of resource for cross-browser compatibility or is it just trial by fire??</p>
  
  <p><strong>CSS Markup</strong></p>
  
  <pre><code>body
  {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      margin: 0;
      padding: 0;
  }
  .container
  {
      width: 1004px;
      margin: 0 auto;
      text-align: center;
  }
  .navigation
  {
      text-align: center;
      display: inline-block;
      list-style-type: none;
      text-align: center;
  }
  .navigation li
  {
      float: left;
      width: 150px;
      position: relative;
  }
  .navigation li a
  {
      color: #fff;
      display: block;
      padding: 8px 7px 8px 7px;
      text-decoration: none;
      border-top: 1px solid #F2861D;
      background: #262626;
      text-align: center;
      text-transform: uppercase;
  }
  .navigation li a:hover
  {
      color: #F2861D;
  }
  .navigation ul
  {
      position: absolute;
      left: 0;
      display: none;
      margin: 0 0 0 -1px;
      padding: 0;
      list-style: none;
      border-bottom: 3px solid #F2861D;
  }
  .navigation ul li
  {
      width: 150px;
      border-top: none;
  }
  .navigation ul a
  {
      display: block;
      height: 15px;
      padding: 8px 7px 13px 7px;
      color: #fff;
      text-decoration: none;
      border-top: none;
      border-bottom: 1px dashed #6B6B6B;
  }
  .navigation ul a:hover
  {
      color: #F2861D;
  }
  </code></pre>
  
  <p><strong>HTML Markup</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="navigation"&gt;
          MY NAVIGATION
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>