IE Browser Compatibility

[lorenhoboy]

The theme seem to display well for Chrome, Firefox, Edge, but when using old Internet Explorer the pictures on certain pages display outside the content box.
See:
https://meadowstar.com/rltproducts/rlt-plant-grow-lights/
and
https://meadowstar.com/rltproducts/rlt-retroreflectors/

Is there a solution for this ancient browser?

[friech]

Hi Loren,

Thank you for writing in, that is a bug in IE where it does not support the max-width: 100%; we apply on images. With that property, images should respond to its parent div’s width, but it’s not on IE. To fix this issue please add the following custom CSS to Theme Options > CSS

/*image and card fix on IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .x-face-graphic img,
   .x-image img {
   	width: 100% !important;
   }
}

Hope it helps,
Cheers!

[lorenhoboy]

Thank you.

[lorenhoboy]

Unfortunately, that code did not fix the IE problem (Internet Explorer 11 is being used to test this code) . See image halfway down the page spilling outside the contents page, over the sidebar, all the way to the right of the screen.
https://meadowstar.com/rltproducts/rlt-retroreflectors/

[nabeel]

Hey Loren,

This oversized image issue in IE happens because IE behaves differently and needs either the Width and/or the Max Width options of the image element to be set specifically.

Try setting the Max Width of all your images to 100%.

Or you can set all your images in your page to 100% max width by adding this code in your page’s Content CSS:

.x-image {
    max-width: 100%;
}

Let us know how this goes!

[lorenhoboy]

This change worked when placed in the CSS for the specific problem page, but did not work when added globally to fix all pages.
Can you suggest a global fix? Or will that have unintended size and placement consequences for other images?

[christian]

Hey Loren,

The usual cause of CSS not working is syntax errors in the code. If you have other custom CSS inf the Global CSS, please try removing all of theme or temporarily transfer them in a notepad and insert the code provided by @Nabeel only.

If it’s still not working after that, please provide the URL of the page where this is working and the URL where the code’s not working. Also give us your site’s WordPress Login URL, Username and Password so we could check your setup.

Thanks.