title: Horizontal navigation not working in IE looks good in FF and Chrome
body: <p>I've been looking at the css code for quite a while and have tried many times to get this page: <a href="http://appraisalline.com/chicagoappraisals/" rel="nofollow">http://appraisalline.com/chicagoappraisals/</a> to render correctly in IE but to no avail. The css code I'm trying to solve for is this:</p>
  
  <pre><code>nav {
  padding: 0px 0px 3px 0px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  }
  
  nav ul {
  background: url(../images/nav-li-bg.gif) right top no-repeat;
  height: 50px;
  overflow: hidden;
  float: left;
  }
  
  nav ul  li {
  font-size: 13px;
  line-height: 24px;
  float: left;
  background: url(../images/nav-li-bg.gif) 0 0 no-repeat;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin-left: -2px;
  }
  
  nav ul li a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  font-weight: bold;
  margin: 0 0px 0 0;
  }
  
  nav ul li a span {
  background: none;
  display: inline-block;
  padding: 0px 6px 0 6px;
  }
  
  nav ul li a span span {
  background: none;
  padding: 13px 17px 13px 16px;
  }
  
  nav ul li a:hover, nav .active {
  background:url(../images/nav-left.gif) left top no-repeat;
  color:#fff;
  }
  
  nav ul li a:hover span, nav .active span {
  background:url(../images/nav-right.gif) right top no-repeat;
  }
  
  nav ul li a:hover span span, nav .active span span {
  background:url(../images/nav-tail.gif) 0 0 repeat-x;
  }
  
  nav .first {margin: 0;}
  </code></pre>
  
  <p>Any and all help for why this is not rendering is appreciated. Thanks!</p>