Internet Explorer IE 11 - Containers

[Raychill]

Hi! I’m having an issue with a site in Internet Explorer IE 11.

I know most people don’t use this browser, but it’s part of our build process to check our sites look good on multiple browsers and OS. I’ve not seen an issue with IE before.

Looks like a problem with containers in the columns.

1. Logo not resizing
2. Text is going outside the column
3. Columns are missing padding (last screenshot too big)

See photos

[friech]

Hi @RachelDi,

Thank you for writing in and sorry that you’re having that issue, please follow the solution/fix I provided here. That should solve most (if not all) issues on IE11.

Cheers!

[Raychill]

That did fix the issue with the logo, but the line-height is looking funky and the text is still bustin’ out the box.

[christopher]

Hi @RachelDi,

Would you please kindly give us the URL of the website that you gave the screenshot for? The problem should not be related to the line-height and it is something related to the Flex layout as IE has some problems rendering the Flex stuff correctly.

I suggest that you check the Flex Layout options of the element that you use and play with the options to find the correct combination. For example, IE does not render Flex options correctly if the value does not have unit. So auto will not be a good idea, and it should be 100% for example.

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[Raychill]

Flex box does seem to be the problem (when I turn off flex, the text stays inside the box), but playing around with settings isn’t doing anything to help.

[friech]

Hi @RachelDi,

Thank you for the credentials, I made some adjustments to the fixed provided.

/*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;
   }
   /*columns/text padding on IE fix*/
   .no-preserve3d .x-col .x-text,
     .ie .x-col .x-text {
	padding: 0px 35px 0px 35px !important;
       width:100%;
	}
  .ie-left-margin {
    margin-left:35px !important;
  }
}

That should resolve the text overflowing and text gapping issues.

There is a button (READ SYLVIA’S STORY) that is now in left-edge of its column, to resolve that, please apply a class ie-left-margin to that button.

Because of IE’s limitation, this is the closest we can get.

Hope this helps,
Cheers!

[Raychill]

Thank you so much!

[christopher]

You’re welcome.