Internet Explorer incompatible?!

Support
#1

Hi!

I’m having incredible difficulty with my XPRO site (www.keystonestateleague.com) not rendering in Internet Explorer browsers!!! The most urgent issue is the main navigation, which resides in the Pro header; I can not get the flex settings to display all menu items, and sub-menus do not appear AT ALL in ie! I’ve tried changing flex basis from “Auto” to 100% as suggested in many other posts with no success.

Obviously, not having any navigation component renders this site useless in ie, and is making for a very unhappy client. Their patience is dwindling (as is my own).

While being able to display navigation in ie is the most critical issue, it is far from the only ie-specific behavior that I’m facing… On just the home page alone, section headers and texts are not displayed, footer menu is mis-aligned, and there are mysterious margins appearing at the bottom of the site.

I can deal with the aesthetic issues as I continue to troubleshoot, but without a functional navigation component for ie users. this project is in serious trouble. With more time, I might consider dropping the Pro header altogether (using Ubermenu or other alternative), but the site is currently live and I need to find a more expeditious remedy for displaying my menu in ie.

In case you can’t tell… I’m desperate! ANY help you can offer will be greatly appreciated!!!

-Kirk

#2

Hi Kirk (@sonofzell),

Thanks for writing in, can you let me know which version of IE this concerns please?

Pro is compatible with IE11 and Edge. You might run into issues with IE11 in the builders, but the front end code is all designed to work with IE11 itself, we don’t support versions older than IE11. If you could let me know the specifics and also post some screenshots of how it looks your end.

Thanks!

#3

Thanks for the reply @Jack,

The versions I am personally testing with are:
Edge 38.14393.1066.0 (WIN10)
IE11 11.1358.14393.0 (WIN10)
IE11 11.0.9600.18762 (WIN7)

Here’s an example of the “killer” issue - My main navigation in the Pro header is not displayed in a readable format. It appears that the items are not flexing properly, resulting in them being superimposed upon one another.
Note: In the Edge browser, the menu items DO flex, and are visible, however the sub-menus (“About” and “Scoreboard”) do not expand on hover or click.

In addition to (but less critical than) the navigation items, much of the pages’ main contents are not visible in IE. I haven’t been able to identify any particular CSS class or other characteristic that determines what appears and what doesn’t, and unfortunately, I’m not super-experienced with code that targets specific browsers.

Here’s a comparison example of my home page (www.keystonestateleague.com) in both Chrome and Edge:

And another (www.keystonestateleague.com/about)…

Note that in all examples, the Pro header also loses its stickiness (something I can live with; just thought it may be relevant to identifying the issue).

Following a suggestion, I added the following code to the customizer:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/IE10+ specific styles go here/

.x-menu-inline > li {
display: block;
}
.hm5.x-menu {
display: flex;
align-items: flex-start;
}
.x-bar-container {
left: -600px;
}
}

and tinkered with several variants of the properties. While I was somewhat encouraged that the IE output was recognizing it, I was unable to concoct any solution that restored any usability to the header’s inline navigation.

Apologies for my verbosity; I appreciate your time in helping me troubleshoot this, and just want to give as much info as possible to help find a solution as quickly as possible!

Best,

K

#4

I realize the color palette does not offer the best readability; here’s perhaps a better example of the header navigation in IE vs. other browsers:

#5

I see you’re using optimizations. Would you mind deactivating W3TC minification, clear all caches and deactivate all optimization plugins like Autoptimize then test again. Optimization plugins could break something and though it renders fine in modern browsers, IE might not tolerate the changes in code. It would also add a layer of difficulty for us when troubleshooting. It would be best to deactivate all third party plugins also or copy your site to a staging server for us to troubleshoot freely without breaking your live site and settings.

Thanks.

#6

Thanks @christian_y, I had dumped page caches, but hadn’t considered the minification as a contributing factor. I’ve been playing around with tweaks with both plugins disabled, however I haven’t been able to make any progress with the header display.

Are there particular edits you can recommend for me to try with the optimization disabled?

Thanks,

K

#7

I changed your Navigation Inline’s Self Flex and Flex Layout but it won’t take effect in the front-end.

I tested the setup in the developer tool and it works.

Please clear all caches and completely remove your caching plugin and all optimizations as it won’t take effect in the front-end. You can install them back when this is solved.

You also are using X Pro. You will need to manually update to Pro. See https://www.youtube.com/watch?v=3Haj5Lz-v5w

Thanks.

#8

@christian_y, you are truly a life-saver!

It seems deactivation was not sufficient for the optimization plugins; once I deleted them, the content was working in the MS browsers!

Just for reference, re-installing W3TC broke the header again (even before re-importing my configuration settings). After fiddling with it for a while, I repeated the removal / re-installation process. Interestingly, I didn’t run into any issues on the second try. Autoptimize did not present any issues after re-installation.

THANK YOU SO MUCH for your time and expertise! Resolving this is a huge relief!

Cheers,

K

#9

You’re welcome, K.