IE11 not displaying Pro menu properly

[scotbaston]

I’m sure you guys have heard something similar many times already But… I can’t quite find the same problem searching through support calls.

The inline pro header navigation is all stacked in the right corner, and also some of the dropdown menu items are indent (when they shouldn’t be)

Screenshots provided of both issues and url below

[rad]

Hi there,

Thanks for writing in.

It looks like the logo doesn’t respond to flex layout, the rendering is small but the flex layout still follows the actual image size which is 700px. And it pushes the menu to the right, please try changing your image settings accordingly until you find the correct setting, it’s bug on IE.

Thanks!

[scotbaston]

Thanks @Rad,

I have hard coded the logo width and from browserstack it looks like the problem is resolved?

[christopher]

H there,

It seems that the problem is fixed. But in general the IE 11 does not render the values of Flex which does not have unit correctly, so, for example, you should not use auto for the flex basis and instead use 100% or something that has the unit.

By playing with the options of the flex you will find the case that the IE11 renders correctly.

Unfortunately, we can not do much regarding the Flex properties which do not have units for the IE11 as it is a bug in the browser itself.

Thank you for your understanding.

[scotbaston]

Thank you, it is good to know the underlying cause, and I’ll plan for it in future code

[rad]

You’re most welcome!