Internet Explorer 11 + Pro compatible horror show

[website2fix]

Guys, I’ve now been cross testing the sites ive been working on on IE 11, and its completely horrible .

I know now IE 11 is kinda old, but its still used on some old machines, so it should look atleast a bit decent than breaking the whole site down.

Please check the secure notes for the links and issues.

Looking forward to fix these issues!

Appreciated!

[rad]

Hi JayL,

Thanks for reaching out.

This is related to flex styling, but I’m not really sure if it’s coming from the cache or the real setting since it’s served from cached and minified files. Would you mind clearing and disable your cache plugin or features? Then I’ll continue checking.

As for the second site, it’s a bit weird. There is no CSS that forcing it to full-width, I even applied a display inline CSS to force it but no luck. May I know how did you fixed it on other browsers? Maybe it’s affecting the view in IE and needs to limit it outside IE. What I’m seeing is just custom classes name with no relation to the button.

Thanks!

[website2fix]

Hi @Rad

1st site; ill test if its cache related… will update. [UPDATE]
The white spaces / no content was cache related indeed… But the HEADER is still gone… even after deactivated cache … How to fix that tho?

2nd site;
The buttons were fixed with custom css, because i wanted equal heights for the collumns. I did this;
giving the buttons and column, and section, the right class…

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column;
}
.item-button {
  margin: auto auto 0 auto;
  width: auto;
}
.x-container:before {
  content: normal;
  }

The quotes - i did nothing special… they were automatically ok on other browsers… But how to fix the quotes for IE?

[christian]

You will need to remove or not apply the custom flex styling for the quotes.

Thanks.

[website2fix]

Hi!

Yes, i see its the CSS, ive outmarked it, and it looks ok in IE!. BUT that css was used to put the button in middle… as you could see, how am i going to allign vertically the button in middle now? with a diffrent code?

[christian]

Hey Jay,

I suggested that you remove the flex styling for “the quotes”. The reason why I recommended to remove the flex styling to your quotes is because it’s not needed. See https://youtu.be/sgZ_ys1U34Q

The specific reason why your quotes break in IE is because of the align-items:center. I’m sorry but I can only go this far. I’d recommend that you learn more about Flexbox from our tutorial at https://theme.co/apex/forum/t/using-flexbox/24851

Hope that helps.

[website2fix]

mate! that video was the solution for the center of the quotes! I’ve done it with the css used in the video, works flawless, even in IE it looks goood. AWESOME!

now for that first site, how come the whole header is like, gone?? i even disabled cache, its not showing up.

Thanks!

[christian]

I’m glad the video helped. For the header, I only see the Navigation Inline having the issue (see secure note). The IE11 compatible setup is, set the Navigation Inline’s Self Flex to No Shrink. See https://youtu.be/ClSvOJL7U8s

Hope that helps.

[website2fix]

Awesome! that was it !

But now something looks out of place in the sub menus, i made a screenshot.

I tried disabling inside the header the effects, but that didnt change it.

Any idea what causes the alligments going wrong?

Thanks again bro!

[christian]

You’re welcome. The correct setting for that is Start for the Sub Links > Content Flex Layout > Horizontal

Hope that helps.

[website2fix]

you rock!
fixed! Thanks!

[Prasant]

You are most welcome.

[website2fix]

Guys! Since the last change about the Quetes that i fixed now this happens…

I have no idea where this comes from, because we havent changed anything in the codes…

please look at the error in the Note.

    Notice
: Undefined variable: the_cite in
/home/domein.com/public_html/domein.com/wp-content/themes/pro/cornerstone/includes/views/elements/quote.php
on line
68

Hope we can find a solution!

[nabeel]

Hi again,

It seems like you’ve not entered anything in the Citation field (see screenshot) which is triggering a PHP notice, you can fix it by entering the Citation. If you don’t have anything for a Citation then you can simply add a space in the field to remove that notice from the front-end.

However this seems like a bug and I’ve submitted this to our issue tracker so the developers will be made aware of it. You can also hide it by turning off the WordPress debug mode by changing this line of code

define( 'WP_DEBUG', true );

To this:

define( 'WP_DEBUG', false );

In the wp-config.php file, please see https://codex.wordpress.org/WP_DEBUG

Hope this helps!

[website2fix]

Gotchya! It was indeed… i forgot to disable to define( ‘WP_DEBUG’, false ); …

fixed!

[christian]

You’re welcome.