Text not displaying properly on IE

Design help General
1

Hello,

My client’s site has been published and works great under modern web browsers. The only snag is three page elements that don’t function properly on Internet Explorer. Which is a problem, because my client is in South Korea, where a majority of the population still uses IE, and thus IE support is absolutely required for this site (even though it is a terrible browser, I know, I know).

This is a very large website with over 60 pages, and the problem only crops up on two pages, so it must be fixable.

The first instance where this problem pops up is on the About page, near the bottom. As you can see, the text on the left spills over across the image on the right:

About%20button%20(1)
About%20button%20(1)1255×609 174 KB

Here’s what it should look like:

21%20PM
21%20PM745×356 134 KB

The second instance where this problem occurs is on every “category” page (in this case, “Security Systems”, “ID Cards”, etc.) There are two sets of two text boxes side by side, with buttons, but for some reason the text just goes straight across the screen, and the buttons stretch out and join together. It appears that some sort of ‘word wrap’ function is not set, but I can’t find where to change that value.

bar%20menu%20-%20security%20systems%20pg2%20(1)
bar%20menu%20-%20security%20systems%20pg2%20(1)1163×847 121 KB

Here’s what it should look like:

46%20PM
46%20PM956×641 62.8 KB

The other problem is that our web designer has left. I’m responsible for fixing the broken pages, but I’m actually just a copywriter with a bit of technical acumen. Meaning, you’re going to have to spell things out for me. Apologies in advance, and many thanks for your patience.

Here are my site’s links:

Thank you!

2

Hi that’s for the first issue :

Google Chrome – Tapes and Google Chrome – Tapes

I’m looking at the second bug.

3

Second bug maybe try this (same strategy)

http://vincent.polenordstudio.fr/snap/screencast_2019-01-15_09-25-45.mp4

The code I’m using for first and second bug:

<style>
.body_light-bg_roboto {
  word-wrap: break-word;
}
</style>
4

Wow, thanks so much for the in-depth response! I’m working on it right now, will report back soon. :slight_smile:

1 Like
5

Yeah sorry your designer left, I tried to make it super simple so you can do it even though it’s not your specialty. let me know. I’m not sure of the results, I can’t test on IE nor publish your site to test.

6

No worries, I’m pretty good at figuring things out. I followed your instructions to a tee, and will find out tomorrow if it worked… (End of the day, and the only person who has IE on her computer has left, lol.)

Cheers,
Dean

1 Like
7

Did you publish the modifications, and do you know what version of IE was at fault?

8

They are published! Not sure what version of IE, but they were definitely using Korean language Windows.

1 Like
9

Sorry, Vincent, your solution did not work. :frowning:

This question is still open!

1 Like
10

IE 11 has about 12-16% browser share in ROK so that is both good and bad news. Good that it is dropping fast, bad that it’s still high. Flexbox support in IE is very buggy. The pages your referencing include flex containers. Good place for you to start to look.

Here is a good resource on flexbox bugs with workarounds.

I turned my back on IE 11 a couple of years ago and can feel your pain. You might consider enlisting professional support.

1 Like
11

Thanks, I will give those resources a shot. :slight_smile:

Chrome and other browsers have seen a huge surge in adoption rates in Korea over the past couple years. The problem is that many Korean websites — especially older ones, and most sites that require access to a bank certificate — still only work properly with IE. Meaning that while many Koreans are using Chrome on a daily basis, close to 100% of the population has IE on their computer and use it sometimes.

TL;DR: Ignoring the problem is not an option, unfortunately.

1 Like
12

So, I’ve found where the flex boxes are — on the About page, it’s Div box 26, for example. Can I just change these to regular blocks? Will that have a bad impact on the site at all?

1 Like
13

I solved the problem! I changed the flexbox layout from ‘left’ to ‘justified’ and it cleared up the bug. It also worked when I changed the flexbox into a normal block, but I figured it’s probably safest to leave it as a flexbox if it works.

This question is closed! Many thanks to @vincent and @webdev for the help. What a great community! :relaxed:

2 Likes
14

It’s always safest to let it in a state that works :stuck_out_tongue_winking_eye:

Good job, and today, you’re no more only a copywriter, you’re an enthusiast Webflow designer!

Welcome on board! (I should have a nice badge ready when those situations happen)

edit: I made a scout with a badge once, that’ll do :smiley:

15

Haha, awesome thanks! :slight_smile:

Yeah, I knew our designer would be leaving, so I started studying a bit about Webflow in advance. It really is a very intuitive program, I like it a lot. Will likely have to dive into it again a few times when the same client comes back asking for edits. Good to know I can handle it myself! ^^

Have a good day, and thanks again.