Mega Menu compatibility issues with Internet Explorer

#1

Hi

Has anyone had compatibility issues viewing pages built with the Mega Menu stack on Internet Explorer? More importantly - is there a workaround?

Yes, I know IE is the worst imaginable browser and having it unceremoneously dumped onto the scrapheap of history would be the finest thing ever to happen for the future of the Internet … but unfortunately there are still lots of users, particularly in the corporate space. Hence I need to allow for it.

The problem I’m experiencing is the stack immediately below Mega Menu is being shunted off to the right hand side of the page. However, if I scroll down the page just a fraction, it auto-magically pops back. This seems to happen irrespective of the stack that I have immediately below Mega Menu. It’s happened with the Foundry Banner stack, and with the Big White Duck “Sections Pro” stack (which I eventually ended up using in place of the Thunderpack Backdrop and Sections stacks).

  • I’ve tested IE 11 on Windows 8, which has this issue.
  • Chrome on Windows 8 seems fine
  • I’m unsure if Microsoft Edge has the same problem as I don’t currently have a machine to test with. But I assume the problem is purely IE.

See screenshots below
Page being tested is: https://pantanalescapes.com/test/carnaval.html

Scrolling down a bit, the graphic pops back into place.

Same issue happens with the Foundry Banner stack.
Page is: https://pantanalescapes.com/test/

Viewing in Chrome is fine.

If I REMOVE Mega Menu, then view in Internet Explorer, the graphic appears in the right place. Hence my suspicion that this is the source of the compatibility issue.
Page is: https://pantanalescapes.com/test/carnaval-nomenu.html

Coincidentally, even when viewing in Chrome on my Mac (Mojave) I’ve noticed that the graphics initially appear on the right-hand side, then very quickly snap into the correct place a moment later. Hence I think there might be something behind the scenes with HTML/css code that’s correctly formatting the display in most browsers but which is missing in IE.

If anyone has any ideas for workarounds it would be appreciated. I don’t particularly like IE but I figure that I need to support it.

Cheers

1 Like
#2

FYI Win10 Edge and IE11 both show the same problem detailed above.

1 Like
#3

Thanks. Good to know … although that means I definitely need a solution.
It might simply be options or something that I’ve done (or not done) in the stack. Hopefully its quick and simple to resolve though.

Cheers

#4

Good morning @andrewmercer

Since we’re going to be troubleshooting in Windows, and you have a page there with a lot of stuff going on, perhaps you can do me a favor so I can help troubleshoot your problem for you. Can you create a one-page project file for me, with as few elements as possible, that still recreates this problem? This will help us narrow in a bit on the problem and see if we can’t get you a solution. When you have a simple project file for me, shoot it over in a ZIP file to adam at elixirgraphics dot com so I can have a look.

When you send that also make sure you include any non-Foundry stacks you end up using in the simplified project file. If you can recreate it without any additional, non-Foundry stacks that would be ideal.

Last but not least, let me know what version of the following you’re using in case it ends up mattering as well:

RapidWeaver:
Stacks:
Foundry:

#5

Thanks Adam

That would be fantastic. I’ll set up the page and will shoot through the project file - although it might take a day or so. You’re right. Having a short simple page and project file will make the diagnosis simpler.

Sorry. Ensuring support for those Microsoft browsers (and their non-standard way of doing things) has always been a real pain.

Much appreciated. Cheers.

#6

Look forward to getting your project file. I’m in the office until about 1pm EST tomorrow and then have a few days off. I’ll get it looked at as soon as possible. The sooner I can get it the better, but I know people are busy, much like myself, so get it over to me when you can. :+1:

1 Like
#7

Hi

A cutdown version of my project file has been sent for analysis (finally).
Apologies for the delay.

Cheers

#8

I’ll have a look at your project file as soon as I can. Being the weekend though I may not be able to get to it until Monday.

#9

No worries. No huge urgency … especially given the length of time it took me to provide with the files. Enjoy your weekend.

Cheers

#10

Before I dive into this – I notice you’re using Sections Pro. Are you able to recreate the problem without this stack? Just curious so I can know where to focus my attention.

#11

Thanks Adam
The same issue is also occurring on the home page (https://www.pantanalescapes.com/test2/index.html) in the sample project. This doesn’t use the SectionsPro stack. It just has basic Foundry stacks. The banner stack used on that page displays off to the side in the same way as the images in SectionsPro when viewed in IE

Hopefully that helps. Not really your issue … those Microsoft browsers have always been painful to design for.

#12

Thanks. I’ll take a look today.

I will ask though, is there a reason you opted for placing the navigation bar at the top, outside of the banner instead of using the Mega Menu’s “Pair with Parent Banner” option? Doing that would circumvent whatever oddities IE is creating I would think as it would then be using absolute positioning to set the location of your navigation bar.

That said, it should still work the way you’ve set it up, so I will dive in after I get a new cup of coffee and start some testing.

#13

It looks like IE isn’t recognizing that since the navigation is starting at a vertical offset of 0 that the navigation should start out being locked in place. I’ll work out a hack for IE that will play nice with other browsers as well. Might be some work. I’ll try to get something ready for the next update of Potion Pack. That said, placing Mega Menu in the Banner stack and using the Pair with Parent Banner feature will fix your problem for now it looks like from my tests.

1 Like
#14

Also, I just noticed that you’re using the Banner stack incorrectly. You’ve placed your image into the standard Stacks background control, but it should instead be added to the Banner Image section, here:

02%20AM

2 Likes
#15

Thanks for calling out my incorrect use of the Banners stack. I’d only recently made the jump from RW6 to RW8 - and things have changed a bit. I’m still finding my way around again.

Regarding the menu placed above the banner:
I was mostly just experimenting with different conceptual layouts to see what works, what doesn’t, and to get familiarity with the toolset. At this point I just have my old very dated website plus some rough layout sketches to try replicating as best I can.

The idea was then to see how things look on different devices … which included a test with Internet Explorer. Then, once I have a set of templates that I’m happy with and which work across a range of devices/browsers and screen sizes, I can start migrating things across.

Thanks again for looking at the IE issue. If I can get Mega Menu to work, it will give be a good starting point. Some pages, as per the home page, will have the menu paired with a banner. Longer articles will be paired with Sections Pro which (at this point at least) comes closest to what I was aiming for.

Cheers

#16

Just looking to help when I see things.

As I mentioned, if you place your Mega Menu stack inside the Banner and then use the Pair with Parent Banner feature in Mega Menu, your IE problem should go away. It will be a workaround for your IE bug for now.

#17

Hi

Just an update - there is a workaround to the IE issue.
Dropping a one-pixel high image (I used one an image 150 pixels wide x 1 pixel high) just below mega menu is sufficient to stop IE messing up positioning of the stack immediately below the menu. This may be a useful trick for others to know if they hit the same issue.

15%20pm

Regarding my incorrect usage of the banner stack, I realised that there was a reason for it. When using the correct method there seems to be no way of anchoring the top of the image to the top of the stack. This means that when viewing on some devices both the top and bottom of the image get cropped depending on the screen/window size (I’m okay with the bottom being cropped but was hoping to preserve the top).

This latter issue may just be a matter of me not going through the tutorials - but I was happy that using the Rapidweaver-default image dialog seemed to resolve it. Anyhow - I’m still experimenting a little. Having issues with menus not displaying or scrolling properly on mobile devices such as my Samsung Galaxy but will check the tutorials and raise that separately if I need to.

Cheers

#18

The cropping and resizing of the image is done purposefully as the image needs to cover the entirety of the background and keep the image in its original proportions. To do this in a fixed height environment it has to crop and scale the image. This is the expected behavior for this sort of background image, as seen in the Banner stack.

Feel free to start a separate thread and I’ll have a look. Know that I’ll probably ask for a ZIP file containing your current project file as well when you do.

As for your original post in the thread – this update was already sent out (v1.3.4) on April 2, 2019. Updating Potion Pack, then restarting RW and doing a Republish All Files from within app should fix the problem. I tested it here in IE myself and all worked as it should.

#19

Fantastic. Thanks again Adam for the great customer support and service.
Cheers

#20

Hi again

Sorry to be a pain - but I think there’s a further issue with the newest Mega Menu update.
The vertical positioning of the stack immediately below mega menu looks to be impacted.

Rather than the vertical position of the next stack starting just below mega menu (i.e. being aligned with the BOTTOM of mega menu), it is instead aligned with the TOP of mega menu.

  • This means that I lose the top of my image

  • If the following stack is set to use full screen height (e.g. Big White Duck’s Sections Pro) it ends up finishing before the bottom of the screen is reached.

Although I can compensate by manually adding a top margin to the stack below (using value that corresponds with the menu height) it doesn’t quite work out, since mega menu is typically configured to have different height values depending on whether the page is being viewed on a mobile, tablet or desktop.

Therefore: Is it possible to REVERT the mega menu stack to the way that it was before?
Given that the issue I reported was only impacting Internet Explorer, and I found a workaround (as mentioned in messages above) I think the the old version is preferable.

You’ll be able to see the problem in the original project sample file that I sent if you update the mega menu stack to the newer version. Aside from Sections Pro, the Banner stack is also impacted - getting its top chopped off too.

Thanks for trying the fix and being so responsive. It just didn’t have quite the effect that I hoped.

Cheers