- This topic has 13 replies, 3 voices, and was last updated 2 years, 10 months ago by Tom.
-
AuthorPosts
-
April 9, 2021 at 3:58 pm #1728193George
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?
April 10, 2021 at 9:45 am #1729008TomLead DeveloperLead DeveloperJust 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.
April 10, 2021 at 10:00 am #1729030GeorgeThis is the IE version:
But I checked the latest IE11 version on BrowserStack and it has the same issues.
April 13, 2021 at 11:26 am #1733090TomLead DeveloperLead DeveloperSorry 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 ๐
April 13, 2021 at 12:04 pm #1733129GeorgeDone. 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.
April 14, 2021 at 6:39 pm #1734731ElvinStaffCustomer SupportHi 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; }
April 16, 2021 at 5:41 am #1736741GeorgeNow the menu is centered for IE. Better than nothing, I guess. The logo footer grid is also not showing at its best!
April 16, 2021 at 10:59 am #1737363TomLead DeveloperLead DeveloperI’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?
April 16, 2021 at 11:41 am #1737391GeorgeCSS 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.
April 17, 2021 at 8:49 am #1738204TomLead DeveloperLead DeveloperIE 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 ๐
April 17, 2021 at 4:21 pm #1738420GeorgeNew CSS fixed the menu, thank you, Tom. Seems like the submenu alignment got affected as well, though.
The
height: auto
statement for theimg
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.April 20, 2021 at 7:24 am #1741943TomLead DeveloperLead DeveloperSeeing 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 theauto
value.June 15, 2021 at 4:28 pm #1823519GeorgeYeah, I think I’ll leave it at that, fingers crossed! Thanks, Tom!
June 16, 2021 at 8:17 pm #1824827TomLead DeveloperLead DeveloperNo problem!
-
AuthorPosts
- You must be logged in to reply to this topic.