Website messes up in Internet Explorer - Please help 😣

Design help Custom code
1

Hey, guys. My client’s site messes up in Internet Explorer for some reason. It works perfectly for me in Chrome, Firefox, and Safari.

He sent me a picture of his screen here:

1936×2592 1.02 MB

and you can see the site here: http://restaurant-amanda.dk/menukort

It stacks all the elements on top of each other, instead of underneath each other for some reason. I’m not sure if it’s flexbox causing it though.

Any advice is very much appreciated! It’s hard for me to go through since I don’t have access to a computer running Microsoft. :persevere:

Thanks, guys!!

2

Hi @NikolajHaugaard,

Yeah, it is more than likely flexbox: Can I use... Support tables for HTML5, CSS3, etc

I previously implemented flexbox throughout a website that I was creating for a corporation, and ended up changing all of the elements using flexbox as the majority of the users were on PCs viewing the site in IE.

I still maintained flexbox in a lot of the mobile situations as very few (if any) users view websites on their phone using IE.

Hopefully this helps :blush:

6

Some truth:

  • Webflow does a very good job at creating design that is solid for all browsers, however, there are exceptions, especially with IE and Edge
  • as designers it’s our duty to test for all main browsers: Chrome, Safari, Edge and Firefox tests are mandatory, Opera desktop and Chrome + Safari mobile don’t harm too.
  • you don’t need a Windows PC to test for IE and Edge

For testing, avoid using online services, they only return static images and you won’t be able to test interactions, responsivity etc.

You can run a series of Windows Virtual Machines on your Mac. It’s like running software sub computers on your Mac OS. Fortunately, there’s one Virtual Machine program that’s good and free, it’s VIRTUALBOX by SUN. Download it here: (it’s the OS X Host link) Downloads – Oracle VM VirtualBox

Once installed, you will be able to create and/or run virtual machines. You could install Windows with a DVD or any other way, but it’s cumbersome and you’d need a licence. Fortunately, Microsoft has made free Windows virtual machines for every VM system just for us to test on IE and Edge. Check this page: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

You need to download 2 VMs: the one for Edge on Win10 and the one for IE11 on Windows 8x.

I can’t go into more detailed and illustrated explanation now as I haveto download those VMs and my internet connection is quite broken at the moment. Try for yourself and let’s see how it goes.

1 Like