Good morning fellow creators! I was wondering if any of you came across this issue before. Now before I start I know already, don't use EXPLORER IT SUCKS. That being said if you look at https://diamonddental.ca/ in Explorer you will see a large gap between the feature products section and the About us section on the home page. This site was build with SD4 with Foundation framework

I have been playing around trying to get rid of this issue. Can anyone give me a clue how i might fix. Of course all other browsers its fine in.

Thanks in advance

It looks like the background behind the feature section is too long, what kind of css do you have for the height?
I can't find any trace of css grid, but there is quite a bit of flex. Last time I looked, IE11 wasn't ok with all kind of flex (but it's a while ago since I looked).
You have a lot of out-of-view. Try to remove some of it (make a copy of the site to experiment on), especially from the feature section. If that helps - or if you find anything that helps - you may have to create a fallback without it for IE, and add support for flex, just as we have been doing with grid.
I could take a look for you, but I would need your project for that. Not everything, perhaps, if you make a copy first, you could delete all the other pages from the copy and just send me the index page (including dependency files).

yea I will play around a bit. I did use some out of view stuff and yes a lot of flex. The backgrounds are all just css so that shouldn't be the problem. Its also doing this weird thing on the Gallery page too.

Ill clean it up and send you the file tonight thanks for helping sort through this.

I may even try to just create a new container and move the feature products down into the new one see how that looks.

Hi Steve & Inger
Internet Explorer 11 looks fine from here except for the fixed background image which of course jumps up and down like a cat on a hot tin roof as you scroll, but that's normal for fixed backgrounds on IE11 there are no noticeable gaps between the sections
The way to solve the background jumping issue (as if you don't already know) it to make is scroll in "fallback first" and fixed in "display flex"

I see a huge gap above the About us in IE11. The .appointment flows down past a lot.

The gallery page isn't performing right, there are huge gaps & spaces

I'm seeing the same

What I have found helps with internet explorer 11 and some of the flexing thingies is to have a parent container that is set to "Block", then have the child element inside that which are flexed etc, Doesn't always work but more often than not it does

Thank you all for your input here much appreciated!

So after much screwing around I fixed these issues. It turns out the for IE you need to define the height and width of any container that is flex as percent and not auto. I changed all the containers that were effected with this to %100 and boom it fixed the issue.

I have checked from various computers now in IE and things look good again! God I hate IE they should just delete the damn thing as they have Edge now.

Anyways thanks again
Steve