Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Lambert
Michael Lambert
8,272 Points

nth-child float, only in IE/Edge

Running into an issue that only seems to only be with IE and edge where the images aren't lining up right. They're setup for 1/3rd width with a float left

Should be 2 rows of 3, but it skips the 4th and 5th spot.

Not sure how to add an image

rydavim
rydavim
18,814 Points

nth-child should work with pretty much anything that isn't IE8 or earlier.

Can you post your code or provide a workspace snapshot so we can take a look at what might be going wrong on those browsers?

Michael Lambert
Michael Lambert
8,272 Points

https://teamtreehouse.com/workspaces/8975482

rydavim
rydavim
18,814 Points

Whoops! That link isn't working for me. It may have expired, or linked to a workspace rather than a snapshot. I could have sworn it was working last night, but I wanted to take a look on IE at work today.

Michael Lambert
Michael Lambert
8,272 Points

https://w.trhou.se/38z0wljfaj

Sorry, didn't snapshot it

1 Answer

rydavim
rydavim
18,814 Points

I'm not sure if I'm just missing it, or if maybe that's an old snapshot, but I couldn't actually find the :nth-child rule in your css files.

@media screen and (min-width: 1024px) {

  /* This rule works for me using IE11, let me know if this isn't working for you. */
  #portImgs img:nth-child(3n+4) {
    clear: left;
  }

}

Clearing the :nth-child float fixed the weird spacing for me using IE11. I believe versions 8 and older do not support this selector, so it will still break on those. Let me know if that's not the issue you were talking about, or if that rule isn't working for you on a browser that should be supported.

Side note: the site looks great, nice job! Happy coding!

Michael Lambert
Michael Lambert
8,272 Points

I had removed the nth-child line as I couldn't find the right combination when I was testing it. This fixed it, however when I use the buttons to sort, the web one in particular, it skips the 2nd/3rd one. And this happens in each browser that I've tested with the added line.

rydavim
rydavim
18,814 Points

The nth-child selector is still counting the images that you'd hidden, which is what is causing this issue.

I've tried to fix it using javascript, but I'm having trouble getting it to work without having to click on it twice. My guess is that your scrolling animations are causing the space to behave differently.

To be honest, I'm not very experienced in dealing with animations, so I'm hoping that if I give you what I've been working on, maybe you can get it to work with what you already have.

The idea is to select the fourth visible image element in order to clear the left hand side. This isn't happening on the first button click due to the scrolling animation, but works on the second click of the same filter link.

$('.floatFix').removeClass('floatFix');
$('#portImgs img').filter(':visible').each(function(i) {
    var modulus = (i + 1) % 4;
    if (modulus === 0) { 
        $(this).addClass('floatFix');
    }
});

.floatFix {
  clear: left;
};

Hopefully that helps. I'll keep working on it!

Michael Lambert
Michael Lambert
8,272 Points

And... It turns out it wasn't even the code at all. When I saved some of the images in Photoshop, even though they were all proportional, some of them were saved slightly larger than others, which was doing something weird in those browsers. Thanks for all your help though.

rydavim
rydavim
18,814 Points

Doh! Oh well, I'm glad it worked out! Your site looks great. :)