title: <li> element floating inside absolutely positioned box IE8 and below
body: <p>Example page to see this in action: <a href="http://sturents.com/student-accommodation/Durham/house/34-young%20street/865" rel="nofollow">http://sturents.com/student-accommodation/Durham/house/34-young%20street/865</a> - the issue is with the box underneath the photo, which appears as a 9x9 grid in most browsers, but as a slightly offset vertical list in IE8.</p>
  
  <p>The following (SASS) code is used:</p>
  
  <pre><code> div.facilities {
      clear: both; overflow: hidden;
      ul {
          margin: 15px 0 0;
      }
      @include facilitiesForm;
      label {
          title { text-indent: -99999em;}
          &amp;:hover, &amp;:active, &amp;:focus {
              span {
                  background-position: $facilitiesFormBgPos;
              }
          }
          &amp;.sel span {
              background-position:  top left;
          }
      }
  }
  </code></pre>
  
  <p>With the @facilitiesForm mixin as follows:</p>
  
  <pre><code>ul {
      list-style: none;
  }
  li {
      float: left; margin: 0 11px 11px 11px;
      &amp;:nth-child(3n+1) {
          clear: left;
      }
  }
  label {
      display: block; width: 90px;
      text-align: center;
      span {
          height: 60px; width: 60px; display: inline-block;
          background-repeat: no-repeat; background-position: $facilitiesFormBgPos;
                     /* one bg-image rule for each icon */
      }
      &amp;:hover, &amp;:active, &amp;:focus, &amp;.sel {
          span {
              background-position: left top;
          }
      }
  }
  </code></pre>
  
  <p>Finally it is inside a  with the following applied:</p>
  
  <pre><code>div.centre-hack {
  overflow: hidden;
  &gt; div {
      float: left; position: relative; left: 50%;
      &gt; * {
          float: left; position: relative; left: -50%;
      }
  }
  }
  </code></pre>
  
  <p>I think that it is the last bit of CSS, the "centre hack" which makes a box of 3x3 floated icons central instead of to the side with a flexible parent that is causing the issue. However without a convenient console to test in IE I'm left doing trial and error on which element needs more layout settings to render correctly, so thought I might see if someone who's used this technique before knows how it can be resolved.</p>