0

The issue with Isotope's overlapping items is well documented, but it seems everyone else is just using images and their problem is solved by using $(window).load(function(){ ..... }); or the imagesLoaded plugin.

I am finding that all browsers work fine except for IE8 where I experience the overlapping. This problem is only onload; if I click any of the filters the style is correct. But I've tried wrapping my script in $(window).load(function(){ ..... }); and it doesn't work!

Overlapping in IE8

When I use the IE inspector, it appears as though the width that Isotope is calculating is 80px off in IE8.

These are in a <ul> and the <li>'s have a defined with of 349px. In Chrome, when I use the inspector I can see that it adds the correct width of 379px (this is the 349px width + 30px left margin) in the inline styles on the <li> element:

position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(379px, 0px, 0px);

In IE8, however, it adds the following inline style:

left: 299px; top: 0px; position: absolute;

Other CSS details:

  • The margin to the left of each item is 30px
  • The container <ul> has a negative margin of -30px to level up the grid
  • The padding is set on an element inside the <li> and is 20px
  • The image has a width of 75px defined

I can't work out why it's overlapping by that 80px or how to stop it! Driving me insane.

Any help? I wanted to write a fiddle to show this but struggled with jsfiddle and IE8, even with the jsfiddle.net/draft/.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
davidpauljunior
  • 8,238
  • 6
  • 30
  • 54

1 Answers1

0

In case anyone stumbles across this tumbleweed question, I ended up having to resolve this using % widths on items as the media query I had was causing the issue.

In actual fact, the media query issue only seemed to happen in IE8 so I targetted that browser specifically with styles that used % widths.

davidpauljunior
  • 8,238
  • 6
  • 30
  • 54
  • Interesting.. running into something similar.. I wonder if it has something to do with IE8 not having media queries.. I'm using respond.js and all the items just sit in the top left of their parent – Damon May 06 '15 at 21:26
  • but.. I am using percentages for widths already, so thaaat's not it. – Damon May 06 '15 at 21:34
  • I was using respond.js as well. I can't remember exactly how I set this up as it was a while ago. Presumably your respond.js comes before your isotope script? – davidpauljunior May 07 '15 at 08:55
  • yup. i figured the issue was because i'm using a trick to create responsive squares where you have height:0 and padding-bottom:100%. isotope wasn't able to handle that in IE8 – Damon May 07 '15 at 15:41