Internet Explorer Compatibility Issues

Support
#1

I’m having two issues testing my new Theme X site with IE11. I used Chrome to develop the site and all renders fine in Chrome but there are several issues in IE11.

Issues in IE 11

-Main Home Page ( http://beta.jandafreight.com/ ) - word wrap on buttons broken in IE11.

-Flip Cards do not flip and display text designed for the flip side over top when hovered on in IE11 on page http://beta.jandafreight.com/services/over-the-road/

Thanks
Mike

#2

Hey Mike,

Thanks for writing around!

  • To fix the text issues in IE11, try adding the following CSS code in the Theme Options > Global CSS: 
.x-anchor {
    display: block !important;
}
.x-anchor-text {
    width: 100% !important;
}
  • To fix the flip cards issue, add the following code as well:
.x-card-outer.flipped .x-face-outer.back {
    background: #fff !important;
}

Let us know how this goes!

#3

Hi Nabeel,

I added the CSS code.

This did fix the word wrap on the buttons.

However the flip card issue remains. Any other suggestions for the flip cards?

#4

Hey Mike,

Your Back Background Color must be set to solid or color in the option itself because it overrides the code given above.

Your current setting is transparent.

It is important that you do that if IE 11 is important for your project because it does not support new CSS features.

Thanks.

#5

Hi Christian,

That did the trick. While the cards do not “flip” in IE11 the backside text is now legible when hovering over the card. Thanks for your help!

The only other issue I found in my testing that I did not previously mention is when you go to the front page ( http://beta.jandafreight.com/ ) in IE 11 and scroll to the bottom of the page - after a few seconds it starts jumping up and down on its own. This continues endlessly about every 5 seconds. Do you happen to have a quick fix for this?

#6

Sadly another issue has been discovered with http://beta.jandafreight.com/services/intermodal-services/ in IE11. The image does not resize and overtakes the background to the right side of the page.

I tried to adjust the Background Color of the container but that did not help in this case.

Any ideas?

#7

Hi again,

The Card element uses CSS 3 properties that are not fully supported in Internet Explorer. Regretfully there is currently no solution to this at the moment.

To fix the images issue in IE, please add the following code in the Theme Options > Global CSS:

.no-preserve3d .x-image img {
    width: 100%;
}

Hope this helps!

#8

Hi Nabeel

Thanks for you reply. While this CSS code did fix the photo in IE11, it made all of my buttons elongated throughout the site in all browsers. In Chrome on the flatbeds page, for example, the button now takes up nearly the width of the screen.

I will leave it this way for a few hours so you have a chance to look at it - I am hoping there is another fix we can try? This one won’t do I’m afraid.

Mike

#9

Hey Mike,

That’s happening due to the following code:

.x-anchor {
    display: block !important;
}
.x-anchor-text {
    width: 100% !important;
}

Please replace it with the following code:

.no-preserve3d .home .el29.x-section .x-anchor {
    display: block !important;
}
.no-preserve3d .home .el29.x-section .x-anchor-text {
    width: 100% !important;
}

Let us know how this goes!

#10

Nabeel

Trying to keep up with all these changes but it seems if I replace the code you mentioned it would leave me only with

as the entirety of the “Global CSS” that I have added. The buttons are now fixed. However the issue with the image stretching outside of its container remains in IE11 on this page.

Do you have any other ideas to address this persistent issue?

Thanks
Mike

#11

Hi again,

You need this code as well to fix the images issue in IE11:

.no-preserve3d .x-image img {
    width: 100%;
}

Let us know how this goes!

#12

Hey Nabeel,

Looks good now in all browsers! Thanks for all your help!

Mike

#13

Glad this is now sorted out.

In behalf of the team, you’re always welcome!

Cheers.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.