Microsoft Edge - site not displaying correctly

[stuartmurphy]

Hi,

Using Safari plugin for responsive design to see how things look in MS Edge. Site looks fine doing this however client uses MS Edge (latest version) as a browser and site doesn’t look okay at all.

Problem with main footer in desktop view to-medium-sized view footer (I have verified this by running a virtual box on the mac).

Problems with homepage headline (overlapping headline from header onto main site).

Problems with Search Box appearing under one of the top menus on the Services Page.

Please help with how to sort this and also does this require specific @media coding to show/hide different content. For example, is it possible to use Sections which appear for MS Edge only and HIDE them in other browsers and create and then hide the MS EDGE sections for every other browser. I can’t remember a client specifying EDGE before, however it is the main browser they view things on which is creating a challenge

[christopher]

Hi @stuartmurphy,

It is best to have a Windows machine so that you can do the changes and check the result in real-time. One point that I see is that it might be a problem of the Flex layout rendering of the Edge browser. It is actually an old IE11 problem, but it seems that Edge also sometimes have this problem. The fact is that Edge/Ie browser does not render the CSS Flex box well when there is no unit is used. For example, the auto value is a value that does not have a unit, but 100% has the % unit.

Please go to the header/footer builder and check the Flex layout control group. Try to set the Flex basis to 100% and then recreate the header/footer using that and it should work ok. Our Header/Footer builders use the Flex layout. You can find the Flex options inside the Bar and Container of the header and footer builder.

Regarding the search modal, I can see the same error you are talking about in the Chrome browser of a Mac machine:

The reason behind this is the Z-Index option. Kindly go to the Bar element of the extra menu that is available in the second link of the Services menu, and change the Z-index to be a lower value:

From what I see, you used a Bar, COntainer, and Navigation Inline element for that specific page. The Bar that contains the Navigation Inline element is the place that you need to change the Z-index.

There is no CSS MEDIA attribute for the browser-specific case, and it is discouraged to use such methods. The best way is to use the options in a way that the Edge Browser will be able to render the FlexBox correctly.

I’d appreciate if you get back to us with the result of the points that I mentioned and if there is a specific case that you still have a problem, kindly get back to use with the URL/User/Pass of your website and the exact URL that the problem is there to double-check the case. You can use the Secure Note to add the information.

Thank you.

[stuartmurphy]

Hi Christopher,

Thanks for the Z-index advice. Sorted immediately. With regards to MS Edge, the footer doesn’t use Flexbox - I had to use a long-winded manual methodology for creating the footer to give me the exact functionality I wanted (rather than using individual columns. Is there a way to get it to look like this (how it works at the moment), using the responsive way that I have tried to achieve this, without getting the footer menu all split like it is at the moment in EDGE. I can’t seem to find a way of getting this done!

Also have one main issue which has been bugging me for a while now - the headline on the homepage of the site - (text over the image). I am having a hard time working out the best way to position this at various screen sizes and it works okay with Chrome and Safari, however on IE it goes below the header area.

This is a headache I have had with headers across sites from day one and constantly have to use negative margin numbers eg -60px on content pages to fix headers. I am sure it is something basic which I must have overlooked - however could do with a fix solution for this because in EDGE/IE the words are down below the header area.

Site information in secure note

[friech]

Hi @stuartmurphy,

Actually, the header issue is also happening on Chrome and Firefox, my first advice is to CLEAR and Deactivate all you caching plugins/features and your browser’s cache to see things as really how they are. Caching is not advisable to have when the site is still in development.

Now, I checked your header and footer and I see that you over-complicate things, I understand that you choose to code those footer menu manually so you could style/layout it were you see it fits, but you did not you just lay it out there like a paragraphs

• 

Please create these as a menu instead (Appearance > Menus) and add it on your Footer using the Navigation Inline element. I also see that you added it in just one container, please place those menus to each of its containers instead.

The same thing on the header, but the cause of the issue on the Headline getting overflow is because the Header is set to fixed height, so even if the header needs to expand to accommodate its content, it can not, because it is set to a fixed height (not responsive).

• 

Try that as height: auto. And the negative margins that you applied did not help your case, it actually brings more issue than fix.

Overall this is not just a one browser issue, but how you set up things. My advice, for now, is to learn how the Flexbox works.

Using Flexbox
A Complete Guide to Flexbox

I understand that Flexbox is a very confusing subject at first, but once you learn it you’ll going to fix those issue in no time, those issue might not happen in the first place.

Have a nice weekend,
Cheers!

[stuartmurphy]

Thanks,

Had to create 12 separate menus to achieve a similar look so created it differently to avoid doing this. Did it the way suggested and worked as expected - just wish there was extra ability to be more creative with footer menus without having to do multiple menus and use flexbox so much to achieve a simple look. thanks for your kind help!

[nabeel]

Glad we could help.

Cheers!