<li> element floating inside absolutely positioned box IE8 and below

Question

Example page to see this in action: http://sturents.com/student-accommodation/Durham/house/34-young%20street/865 - 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.

The following (SASS) code is used:

 div.facilities {
    clear: both; overflow: hidden;
    ul {
        margin: 15px 0 0;
    }
    @include facilitiesForm;
    label {
        title { text-indent: -99999em;}
        &:hover, &:active, &:focus {
            span {
                background-position: $facilitiesFormBgPos;
            }
        }
        &.sel span {
            background-position:  top left;
        }
    }
}

With the @facilitiesForm mixin as follows:

ul {
    list-style: none;
}
li {
    float: left; margin: 0 11px 11px 11px;
    &: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 */
    }
    &:hover, &:active, &:focus, &.sel {
        span {
            background-position: left top;
        }
    }
}

Finally it is inside a with the following applied:

div.centre-hack {
overflow: hidden;
> div {
    float: left; position: relative; left: 50%;
    > * {
        float: left; position: relative; left: -50%;
    }
}
}

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.

Answer 1

Actually - I believe the issue is with nth-child you're using. IE8 has no support for it.

http://reference.sitepoint.com/css/pseudoclass-nthchild

However - it appears to work fine in jsfiddle in IE8 and 9 ... http://jsfiddle.net/NDxT7/

Upon further discussion, we discovered that the there was some elements causing issues with the layout. IE was less forgiving than other browsers, hence why there was some issues. Errors can be seen in the validation here: http://validator.w3.org/check?uri=http%3A%2F%2Fsturents.com%2Fstudent-accommodation%2FDurham%2Fhouse%2F34-young%2520street%2F865&charset=%28detect+automatically%29&doctype=Inline&group=0