Hello,
Some sections on my landing page ( flip cards and chemo section) are not rendering properly in IE.
I had this issue before and they told me to use this Css: @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
[class^=‘x-bg’] {
height: 100vh;
}
}
but it seems to not be working on IE browsers. Also another section of the site is not rendering properly in IE. Please see attached photos. 
Here is the url: http://www.wigsbybarbara.com/
if you open it in chrome, safari or firefox it renders properly.
Also there is a delay in the hero image at the top of the page. It seems to pop in seconds later. How can I fix that?
Please advise. Thank you
1 Like
Hi There,
Thank you for writing in, what version of IE you’re using? This is how that section looks on my end.
Regarding about that first screenshot, that is because of this custom CSS (on your Customizer > Additional CSS)
.x-section .x-container.marginless-columns.fullimage .x-column:first-child {
display: flex;
align-items: flex-end;
}
You need to remove that or make the selector more specific so it wont affect other section.
Regretfully, Card Element is not intended to have the flip effect in IE as that browser does not support 3D CSS transitions correctly. With that said Cards does not have the 3D look and flipping animation on IE.
Hope this shed some lights,
Cheers!
Hello,
thanks for your response. it is displaying like that on ie 15 and 14. also in regards to the first picture, if you look at this thread you will see that was the code provided to me to fix an issue i was having. https://theme.co/apex/forum/t/classic-card-column/20738/5
thanks again 
HI again,
You need to remove the following code to fix the column issues:
.x-section .x-container.marginless-columns.fullimage .x-column:first-child {
display: flex;
align-items: flex-end;
}
For the images issue, you can add the following code in your Customizer:
.x-image img {
width: 100% !important;
}
Let us know how this goes!
hello, Thanks for your response. unfortunately, the 100% width code is not achieving the results that I am looking for. The other is actually working perfectly on all browsers with the exception of IE. Is there a way to just fix it for IE? Thank you
Hi There,
Please remove both of the provided CSS above, and that section (CHEMO-PATIENTS & MEDICALLY RELATED HAIRLOSS?) should fall back to its normal layout. (we will provide a different solution if necessary.)
And please add the fix I provided here. That fix is for images getting overflown on the Columns and Cards, I don’t see that issue on your site, but its better if you have that in place ready.
Cheers!
Ok so, I back read your issue on that other thread and the issue was this; you need the image to always align on the bottom of the Column, right?
Then Christopher, provided you a custom CSS and it works, However that mess up the column layout on IE (so we need to remove that and have a different solution.)
The other solution would be adding an inline CSS vertical-align: bottom; on that right column. To do this, inspect that Column and under the Customize tab, you’ll see the Inline CSS field.
Hope this shed some lights,
Cheers!
so the vertical-align:bottom fixed that problem perfectly! Thanks so much! Unfortunately the images are still not appearing in IE 14 and 15
Hi there,
Please go to the section which you added those images and Flip Cards and click on the Customize tab to see the Class option. add iefix class there.
Then add this code to X > Launch > Options > CSS:
.iefix .x-bg {
display: flex;
}
That will fix the images problem you are experiencing.
Thank you.
Hello,
Thanks for your response. I implemented the suggested code but am still experiencing the problem. I see the code on the inspector in IE but the images are the same. Please see attached screenshot. Thanks again for your help.
Hi there,
Looks like it works when toggling in browser inspector, but not working when applied directly to custom CSS. Instead, please try this one
.iefix .x-bg {
display: block;
z-index: 0;
}
Thanks!
Hello,
Its the same even with that code. I tried some others as well but still no success : ( would it help if you had the login credentials?
Hi There,
Yes please, share your credentials in a secure note so we can do some testing 
Thanks
ok thank you
Hi there,
It’s Edge browser glitch, there is no CSS that can fix it. It fixes itself if you change something within element’s styling or content.
I added this code to your cornerstone’s custom javascript, and it now works in IE edge.
jQuery ( document ).ready( function() {
setTimeout( function() {
jQuery('.iefix .x-bg').append('Hey EDGE, please work now :) ');
}, 600 );
} );
It fixes itself only when something is changed in its content.
Thanks!
great thanks so much : )
You’re more than welcome, glad we could help.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.