Footer Problems on IE

[ASTI]

Hello!

I am having some weird problems with my footer solely on Internet Explorer. As you can see on the link below in an Internet Explorer Browser vs. a Chrome browser, something isn’t justifying correctly in IE. Anything I can do to correct this problem?

Applied Software Technology

Thanks in advance!

[friech]

Hi Asti,

Thank you for writing in, but this is how you footer looks on IE11 on my end. It’s the same layout as on the Chrome.

Would you mind providing a screenshot clarifying the issue.

Cheers!

[ASTI]

Here is the Chrome image. The first bar is centered with the bars below it.

Below is the image of the footer on IE. It is positioned far off to the right.

[christian]

Hey @asti,

Try changing your Row’s Horizontal Flex Layout to Center.

I’ve tested that in dev tools the result is very close to Chrome. The slight difference in position is because of the scrollbar in Chrome.

If that does not help, pleas give us WP admin credentials in a Secure Note.

Hope that helps.

[ASTI]

I actually already had this set to center. My credentials will be attached. Thanks!

[friech]

Hi There,

The first bar is still set as space-between, please change that to center and clear all your caching plugins and optimizer plugins.

Space Between

Center

Hope it helps,
Cheers!

[ASTI]

This is all very confusing to me. I’ve checked three times now and I have made sure that all of the flex settings are set to center and not space-between. Not sure why IE is interpretting those settings that way, but what is more frustrating is I can’t get into the backend of the site on IE either. It simply stalls while loading into the Pro Footer configurations.

I will send my creds again, but I’m not sure why you couldn’t get into the login page. Let me know if there is anything else I can do.

Thanks

[rad]

Hi there,

Looks like a cache problem, I keep on changing the max-width to 1200px

But in chrome, it shows 1200px

Based on the selectors, seems like it displays different header bar?

Adding this CSS should work too, but not taking effect in IE too

    .e3516-1.x-bar-content, .e3516-19.x-bar-content, .e3516-37.x-bar-content, .e3516-53.x-bar-content {
     max-width: 75% !important;   
    }

The problem in IE is the max-width, setting it to 80% fixes it. I duplicate the footer and it still picking up the settings from the original footer. I’ll continue checking, the cache is a common cause of headaches in IE

Thanks!

[ASTI]

It seems to be a very perplexing problem indeed. Is there anything else I can try to possibly fix this? IE is the absolute worst.

[christian]

Hey @ASTI,

I have discovered the root of the problem though the solution is the same like what I’ve said previously.

The problem is the justify-content: space-between; declaration which is coming from the stack’s CSS. I was mislead previously because you’re using Autoptimize. I deleted Autoptimize’s cache and deactivated it and also cleared all caches to discover where the declaration is coming from.

I saved your footer as a template and downloaded it so I could check if this is a bug. For now, I fixed the issue by placing this code in your bar’s Element CSS

$el { -webkit-justify-content: center; justify-content: center; }

It’s now fixed in IE. Please clear all caches several times including your browser cache before checking.

I’ll post this in our issue tracker.

Thanks.

[ASTI]

Thank you for your help!

[nabeel]

Glad we could help.

Cheers!