[Resolved] IE11 compatibility

[Nick]

Hi team,

Just a query regarding IE11 compatibility. Am aware IE11 is soon becoming unsupported, however there does appear to be a bit of an issue with our GP site top/footer menu bars in IE11 which would be good to eradicate.

Link below. The main nuance on this site is the SVG logo being used.

Any thoughts / known issues would be appreciated. thanks!

[Tom]

Hi there,

It looks like IE11 isn’t liking flex-end.

What happens if you set your navigation alignment to left?

For the footer, try this:

.inside-site-info {
    justify-content: flex-start;
}

[Nick]

Thanks Tom – Have made both those amends mentioned and it seems to have got rid of the page width issue.

Seems to be 2 points remaining:

1) The SVG logo is still playing up in IE11.

2) Also, is there a way to get the top menu options right aligned again without it playing up in IE11….or would it be best to use a browser specific css amend to just left align the top navigation in IE11?

[Tom]

Try this:

.navigation-branding img,
.site-logo.mobile-header-logo img {
    height: auto;
}

.navigation-branding,
.site-logo.mobile-header-logo {
    margin-right: auto;
}

[Nick]

Thanks Tom – appreciated…that sorts the menu bar out….if you see the screenshot below…there seems to be IE11 logo issues when you scroll down and with reduced screen widths. Is there anything you could suggest to deal with that?

[Tom]

How large is the original logo you’re uploading?

By default, the height is set to the height of the navigation (60px) in your case. However, from what I saw, the logo wasn’t 60px tall originally, which is why it was stretching. Now, in your screenshots, it looks much larger.

[Nick]

Thanks Tom – You’re thoughts appreciated. Yes the original SVG was larger, therefore I guess the css sizing adjustments are ignored in IE11. Have fixed actual sizing and all appears good. thanks again.

[Tom]

No problem!

[Author]

Posts