Pro Header Issue - IE11

Support
#1

Hi, I’m having a couple of issues with the pro header in IE11 and I’m hoping y’all can help me fix these.

URL: http://hydrabeds.rhdproofs.com/

Issue 1: If you look at the site in other browsers, you will see a Dealer Locater button, a dealer login button, and social media links at the very top of the page. However, there’s aren’t displaying at all in IE11. Can we get these items to display in IE11?

Issue 2: When I hover over the Products Menu Link in IE11, a white box pops up. None of the links should have any sort of dropdown menus. Can you help get rid of this?

Thanks in advance for your help!

#2

Hi There,

1.) On the Self Flex section, try to change the Flex Basis from Auto to 100%:

IE 11 can not handle the auto property correctly in some cases.

2.) Go to Appearance > Menu, remove the submenu link Hydra Bed

Hope this helps.

#3

Hi Lely, thanks for the response. Do I adjust the self flex section for the container? Because when I change that setting to 100% for the container, it makes all the buttons spread out evenly across the bar. I want to keep them contained to the right. Is there something else I can do? Or do I need to adjust that setting elsewhere?

#4

Hi there,

Just kindly use percentages there instead of the auto. As IE 11 has problems rendering the auto property when it comes to flex.

Try something like 50% or whatever it will suit your design.

Thank you.

#5

Thanks. I have it set as a percentage now… but I still don’t see it in IE11. Any other suggestions to get the buttons to show in IE11?

#6

Hi there,

Please update your theme first, the latest version contains some flex fixes for IE11. And you have to do it manually since X Pro is now named Pro (different name).

Thanks!

#7

The website is using Pro. Not X Pro. All is up to date. Buttons still aren’t showing in IE11. Really need y’alls help on this one please!

#8

Hi There,

We’re sorry you’re still having this issue. Would you mind providing us with login credentials so we can take a closer look on that specific bar settings? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#10

Hi there,

Thanks for updating the theme.

Yes, I can still confirm the issue, been changing the flex setting and it looks like it always start in the middle in IE11, hence, making it align to end make the content outside the window.

I’ll continue checking and I’ll also forward this for additional help :slight_smile:

Thanks!

#11

Hi there @ranchhouse,

Thanks for your patience on this. I’ve been doing some digging and there’s a few things we can try.

1: On the container that the buttons are in, IE11 doesn’t support calc on the flex-basis property, while this is currently set to auto. Can you try changing that to a specific value in either pixels or percentage and see if that makes a difference?

2: Individual flex-items in a container that aren’t aligned self, or align center are known to overflow their container in IE11. There is a workaround for this which can be seen here: https://github.com/philipwalton/flexbugs/blob/master/README.md#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

3: There is a great list of current Flexbox bugs for IE and other browsers here: https://github.com/philipwalton/flexbugs/blob/master/README.md one of which is related to an issue where IE11 doesn’t correctly apply to flex-items from a flex container, I noticed in your header right now there are no explicit values provided (none is provided). Can you try specifying a minimum and maximum height for testing/debugging purposes to see if this helps at all.

I’ve done some various testing in a range of emulators and couldn’t replicate the button itself going off the screen. Could you provide a screenshot of how the website looks in your testing please?

Thanks!

#12

Hey Jack, thanks so much for the info. I haven’t had a chance to review. I’ll review today and get back to you. Thx.

#13

Glad we could help.

Cheers!