Question

I wonder if anyone has a solution for this. I want a grid of images 6 columns by two rows. At the moment it works fine: http://oaeyewear.4pixels.co.uk/brands.html
and I’m using:

.gallery {
   list-style-type: none;
}
.gallery li {
    float: left;
    height: 130px;
    width: 130px;
    margin-bottom: 26px;
    margin-right: 26px;
}
.gallery li:nth-of-type(6n+0) {
    margin-right: 0px;
}

But I know IE8 won’t recognise the nth-of-type selector. Is there a way of

1. Make IE8 play along. Selectivizr won’t do this with jQuery and
   I don’t want to introduce another library
2. Using some other conditional CSS just for IE8
3. javascript?

Ideally the solution needs to work responsively as the site is based on the Foundation Framework. At the moment it works well as it sizes down to two columns and I can just change the <li> with a media query to work across 300px.

Answer 1

In this case I would use a negative margin approach.

    .gallery {
       list-style-type: none;
       margin-left: -26px;
    }
    .gallery li {
        float: left;
        height: 130px;
        width: 130px;
        margin-bottom: 26px;
        margin-left: 26px;
    }