[Resolved] Internet Explorer issues

[George]

I know that Internet Explorer is outdated but the latest site I’ve built looks terrible on IE (I am testing on Version 20H2 OS Build 19042.870 on Win 10). Especially the header and the logo grid in the footer. Is there a way to improve things?

[Tom]

Just to confirm, is this IE11? I’ll need to check on my office computer (Windows). IE11 shouldn’t have any issues with Flexbox, but at the same time, it is IE.

[George]

This is the IE version:

https://imgur.com/DNlhZMK

But I checked the latest IE11 version on BrowserStack and it has the same issues.

[Tom]

Sorry for the delay here.

Alright, let’s try this:

1. Set the navigation alignment to “Left”.
2. Add this CSS:

.navigation-branding img,
.site-logo.mobile-header-logo img {
    width: 168px;
}

Let me know 🙂

[George]

Done. Now the nav is aligned on the left, though, should be on the right. I have attached a staging link where I do my testing.

[Elvin]

Hi there,

Try adding this CSS:

nav#site-navigation .inside-navigation .navigation-branding {
    margin-right: auto;
}

nav#site-navigation .inside-navigation .menu-bar-items {
    margin-left: unset;
}

[George]

Now the menu is centered for IE. Better than nothing, I guess. The logo footer grid is also not showing at its best!

[Tom]

I’m not seeing any of the changes made to the navigation – did you revert them?

As for the logos – very weird. Does the same thing happen with regular non-SVG images?

[George]

CSS currently used:

.navigation-branding img,
.site-logo.mobile-header-logo img {
    width: 168px;
}

nav#site-navigation .inside-navigation .navigation-branding {
    margin-right: auto;
}

nav#site-navigation .inside-navigation .menu-bar-items {
    margin-left: unset;
}

I have just replaced SVG logos with PNGs, it looks better with them. Wonder what the issue might be with SVGs, though.

[Tom]

IE doesn’t like unset, so you need to do this:

nav#site-navigation .inside-navigation .menu-bar-items {
    margin-left: 0;
}

As for the SVGs, it’s IE. You may need to explicitly set the width and height attributes, but I’m not even sure that will fix it. Luckily, WordPress itself will be dropping support for IE11 soon and we can all forget about it once and for all 🙂

[George]

New CSS fixed the menu, thank you, Tom. Seems like the submenu alignment got affected as well, though.

The height: auto statement for the img attribute seems to be doing the “damage” for IE on the grid. Do you think there is something I could do? I have attached a video.

[Tom]

Seeing as IE doesn’t accept unset as a property value, I’m not sure there is a solution here, at least not an elegant one..

You could give each image a fixed height in the style="" attribute – this would overwrite the auto value.

[George]

Yeah, I think I’ll leave it at that, fingers crossed! Thanks, Tom!

[Tom]

No problem!

[Author]

Posts