Please Help with IE Formatting

[elevenmassmedia]

Hi, we have recently completed a site for a client, who uses Internet Explorer, and they are seeing some formatting differences from every other browser. A photo in a left column will have the text from the right column over top of it, this type of thing. Is there something we can do on our end to make this compatible with IE? We don’t have anything terribly special in the design, just columns.

Thank you,

[nabeel]

Hi @elevenmassmedia,

Thank you for reaching out to us. This oversize images 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%.

If you want 100% to be the default value of the Max Width, you can save it as the Image element’s preset and then save it as Element Default.

Alternatively you can add the following code in the Theme Options > CSS:

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

But it’s best that you follow the native solution so it doesn’t cause any other issue. Let us know how this goes!

[elevenmassmedia]

Thank you for such a quick reply! We’ve made the changes, and while I don’t have access to IE here, we will hear from the client soon.

[friech]

Hi @elevenmassmedia,

If the issue persists, please try this:

/*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;
   }
}

You can provide us the page URL in a secure note so we can take a look on it on IE.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Cheers!

[elevenmassmedia]

Thank you all for your help. It looks like that media query might be something we should use on all our sites moving forward, as a best practice prevention for IE… is that a safe assumption, or is there a reason we should not do that?

[nabeel]

Hey @elevenmassmedia,

You don’t necessarily need the CSS given by @friech. This can be easily fixed by setting the Max Width of all your images to 100% (see screenshot below) as mentioned previously IE behaves differently and needs either the Width and/or the Max Width options of the image element to be set specifically.

The above CSS is just an alternative approach and it should only be used when there is no native solution.

Hope this helps!