[Solved] Last-of-type fix for IE8

[smedz28]

Hi all,

I have an issue with a grid system I built based on a few other grids I looked at. I added margins into the grid to give some ‘white space’ between columns which is all fine and dandy until you view in IE8 (only tested in firefox and IE8 as done this on the works laptop, not tried it in chrome etc at home yet).

The layout breaks and pushes the columns out of line and underneath. I think this is due to the support for last-of-type in IE8.

I would rather have my grid supported and working in at least IE8 than force an upgrade to a different browser or turn visitors away. Can anyone help with a resolution to this, preferably just CSS as I have no clue at all about JS/Jquery

here is an example to grab and check in IE8 if you need to see what I mean

Grid Example

[Paulie_D]

Link does not work.

than force an upgrade to a different browser or turn visitors away

The third option is just to have it looking slightly ‘off’ in IE8.

They may not get the ‘perfect’ page but it should still be mostly there. If they ‘re still using IE8, they’re probably used to it.

[smedz28]

Try this

[smedz28]

But it’s way off, as it pushed the last columns underneath and as they are floating left the layout seriously break

[jurotek]

You might consider something like THIS and forget the last-of-type

[paulob]

Hi,

How about using first-child which ie8 understands and have a left margin instead of a right margin and then negate the margin on the first item.

<!--[if lte IE 8]>
<style>
[class*='col-'] {
 margin-left: 1.6%;
 margin-right:0;
}
[class*='col-']:first-child {
    margin-left: 0;
}
</style>
<![endif]-->

Or perhaps just change this:

[class*='col-'] {
  float: left;
}

[class*='col-'] {
  margin-right: 1.6%;
padding:10px;
}
[class*='col-']:last-of-type {
  margin-right: 0;
}   

to this:

[class*='col-'] {
 float: left;
 padding:10px;
}
[class*='col-'] + [class*='col-'] {
 margin-left: 1.6%;
}

[smedz28]

jurotek……Did you check this in IE8, it doesn’t work the columns are still pushed down and the layout breaks

[smedz28]

Paulob…..I am intrigued by this option

[class*='col-'] {
 float: left;
 padding:10px;
}
[class*='col-'] + [class*='col-'] {
 margin-left: 1.6%;
}

However I don’t understand the CSS [class*='col-'] + [class*='col-'] can you explain what this does? I don’t really get why calling 2 selectors

[James]

@smedz28 – The + selector targets any sibling directly after the element. So in this case, [class*='col-'] + [class*='col-'] will select the second col- onwards except the last one.

[paulob]

can you explain what this does? I don’t really get why calling 2 selectors

As James said except he meant all but the first one (not the last):)

The adjacent sibling combinator (the plus symbol (+)) selects an immediate sibling so p + p would select any paragraph that is preceded by a paragraph. If you have ten sibling paragraphs then all but the first would be selected.

In this case it has much the same effect as using first- child (which is supported in IE8) and allows you to negate the margin from the first element instead of negating it on the last element as in your example. Very often first-child can be used instead of last-child if you change the logic a little and then you get support in IE8 without hacks.

The adjacent sibling selector however has support back to IE7 so can be used if that browser needs support.

As in most cases a certain structure is expected for these things to work but in a grid situation that would seem to be a pre-requisite anyway.

http://codepen.io/paulobrien/full/ezsIu/

[smedz28]

Ok so would I be replacing all of this –

[class*='col-'] {
  float: left;
}

[class*='col-'] {
  margin-right: 1.6%;
padding:10px;
}
[class*='col-']:last-of-type {
  margin-right: 0;
}   

With this –

[class*='col-'] {
 float: left;
 padding:10px;
}
[class*='col-'] + [class*='col-'] {
 margin-left: 1.6%;
}

[paulob]

Yes here’s a codepen:

http://codepen.io/paulobrien/full/ezsIu/

[smedz28]

Thanks for all your help guys…..I tested this locally on my laptop at work and it doesn’t seem to like it even with the adjustments made, but I run it in browserstack and the changes were reflected as they should be so i’m happy with the changes. Thanks for the detailed explanations

[paulob]

Hi,

The example I gave in the codepen above is working in IE8 fine :)

[smedz28]

It’s maybe something to do with the settings on IE8 on my laptop (work), these are locked by IT for security but it’s confirmed as working in browserstack anyway so thanks again

[Author]

Posts