title: IE9 random CSS problems
body: <p>I am currently debuggig my site in IE9, and I am coming across a view quirks mainly to do with the navigation bar that runs across of the top the site, </p>
  
  <p>When you look at <a href="http://mensclothingroom.factoryagency.co.uk" rel="nofollow">http://mensclothingroom.factoryagency.co.uk</a> the nav is fine, however if you then look at <a href="http://mensclothingroom.factoryagency.co.uk/category/socks" rel="nofollow">http://mensclothingroom.factoryagency.co.uk/category/socks</a> the nav partially stacks, this is really confusing as they are running the same CSS and also ie specific stylesheets.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.navigation {
      position:absolute;
      top:69px;
      left:5px;
      padding:0px 0px 0px 4px;
      border-bottom:1px solid #ccc;
  }
  
      .navigation .site_navigation {
          padding:7px 0px 7px 0px;
          clear:both;
      }
  
          .navigation .site_navigation ul {
              height: 34px;
              line-height: 34px;
  
          }
  
              .navigation .site_navigation li {
                  float: left;
                  height: 16px;
                  margin-right: 15px;
                  position: relative;
              }
  
                  .navigation .site_navigation li &gt; ul {
                      display:none;
                      width:165px;
                      position:absolute;
                      left:0px;
                      top:34px;
                      background:#fff;
                      border:1px solid #aaa;
                      z-index:999;
                      height:auto;
                      padding:2px 0px
                  }
  
                      .navigation .site_navigation li:hover &gt; ul {
                          display:block;
                          box-shadow: 2px 2px 2px #999999;
                      }
  
                      .navigation .site_navigation li:hover &gt; ul li &gt; ul {
                          display:none;
                      }
  
                          .navigation .site_navigation li:hover &gt; ul li,
                          .sidebar_navigation li {
                              line-height:11px;
                              clear:both;
                              display:block;
                              margin-bottom:2px;
                              width:140px;
                          }
  
                              .navigation .site_navigation li:hover &gt; ul li {
                                  height: auto !important;
                                  line-height: normal;
                              }
  
                              .navigation .site_navigation li:hover &gt; ul a,
                              .sidebar_navigation a {
                                  font-size:10px;
                                  padding:6px 0 6px 10px;
                                  width:130px;
                                  display:block;
                              }
  
                                  .navigation .site_navigation li:hover &gt; ul a {
                                      width:155px;
                                  }
  
                                  .navigation .site_navigation li &gt; ul a:hover,
                                  .navigation .site_navigation li:hover &gt; a,
                                  .sidebar_navigation a:hover {
                                      font-size:10px;
                                      background:#999;
                                      color:#fff;
                                  }
  
                                      .navigation .site_navigation li:hover &gt; a {
                                          font-size:12px;
                                      }
  
  
                  .navigation .site_navigation li.sale {
                      float: right;
                      height: 25px;
                      line-height: 25px;
                      margin-right: 4px;
                  }
  
                      .navigation .site_navigation li.sale a {
                          background:#BE1E2D;
                          height:16px;
                          color:#fff;
                          padding:4px 18px;
                      }
  
                          .navigation .site_navigation li a.sale {
                              display:block;
                              height:25px;
                          }
  
                          .navigation .site_navigation li.current a.sale {
                              background:#9C1925;
                          }
  
                  .navigation .site_navigation li  a,
                  .sidebar_navigation a {
                      color: #666666;
                      font-family: Georgia,Times,"Times New Roman",sans-serif;
                      font-size: 12px;
                      letter-spacing: 0.05em;
                      text-decoration: none;
                      text-transform: uppercase;
                  }
  
                      .navigation .site_navigation li a {
                          display: block;
                          padding: 0 10px;
                      }
  
                          .navigation .site_navigation li &gt; ul a {
                              padding:0px 0px 0px 12px;
                          }
  
                          .navigation .site_navigation li a:hover,
                          .navigation .site_navigation li.current a {
                              background:#aaa;
                              color:#fff;
                          }
  </code></pre>
  
  <p><strong>IE CSS</strong></p>
  
  <pre><code>  .navigation .site_navigation {
      padding:10px 0px 0px 0px;
  }
  
  .navigation .site_navigation li {
      list-style:none outside none;
      margin-right:15px;
      float:left;
      height:auto;
  }
  </code></pre>
  
  <p>Can anyone shed any light on the problem?</p>