I'm having trouble getting our CSS to work on the front page for IE 11.  Is anyone familiar with CSS that can help me?  Basically the parent element is getting stretched by the child elements and distorting our front page on IE 11.  Any other browser it appears to be OK.

<style>

    .ipsBox2 {

        display: flex;

        flex-wrap: wrap;

        ;

        margin-top: -10px;

    }

    .ipsBox2 .item {

        flex: 1 0 250px;

        box-sizing: border-box;

        border: 1px rgba(32, 15, 171, 0.69) solid;

        -webkit-border-radius: 15px;

        -moz-border-radius: 15px;

        border-radius: 15px;

        padding: 10px;

        margin-left: 10px;

        margin-top: 10px;

        position: relative;

    }

    .item2 {

        flex: 1 0 calc(100% - 10px);

        box-sizing: border-box;

        border: 1px rgba(32, 15, 171, 0.69) solid;

        -webkit-border-radius: 15px;

        -moz-border-radius: 15px;

        border-radius: 15px;

        padding: 10px;

        margin-left: 10px;

        margin-top: 10px;

        position: relative;

    }

    @media (min-width: 1024px) {

        .ipsBox2 .item {

            max-width: calc(50% - 10px);

        }

    }

</style>

The flexbox layout module is buggy in all versions of IE, including IE 11. One of the issues is that long paragraphs of text aren't always wrapped properly. See http://caniuse.com/#feat=flexbox

Bump 

 

Did you get sorted Chase 

Thank you, I'm going to keep this post up as I try and figure it out. 

Hi Chase,

 

Don't know if you just applied a change to it or not, but it's actually showing just fine on my end.

 

Here's what I'm seeing on IE11:

http://i.imgur.com/rEYupCy.png

 

Unless you mean the top news box is misaligned with the right margin?

People use IE?

Oh what was the fix ... I ran into something similar, but it has been A LONG time since I've done any CSS ... will get back to you and dig up some of my old projects ... my initial guess is

 this is the problem: "max-width: calc(50% - 10px)" - I think it's impossible for it to calculate

 

Cheers, Rob.

Unfortunately, I haven't found a fix yet.  I think I'm going to have to resign to the fact that if I want to have a nice, evenly spaced and aligned front page, I can't do the two column news... IE11 just refuses to play nice.  Unless we force everyone on IE11 into compatibility mode, which seems a bit of a stretch.

 

Just frustrates the hell out of me that IE has to always do something different.  Will keep playing, but until I find a solution, I have put it back to the old layout.

Unless we force everyone on IE11 into compatibility mode, which seems a bit of a stretch.

 

I've done that in the past also ... most users are unaware they get pushed into compatibility mode.  Don't get me started on web development ... I simply don't like it ... one reason I moved to Silverlight development to get me away from all that crap (well not all of it, but most of it).  And as soon as I did, Microsoft (well actually Apple) killed Silverlight and HTML5 was it ... long live the new King.  Anyway, I digress ... as you can see my many decades of "chase the technology of the day" has left me somewhat jaded

 

Sorry, couldn't find the old code ... and it may have been that I just forced compatibility mode for IE11.

 

Cheers, Rob.

And... now you all know the reason why I rolled back to good old IE10... It just works fine for me so why be bothered with problems, eh?

It just works fine for me so why be bothered with problems, eh?

You might not have problems but you will have security risks.

 

Coming up on 12 Jan. 2016, MS will no longer update versions of IE that are not the latest for whichever OS you have. IE11 for W7, W8, and W10, or IE9 for Vista will be the only versions supported.

 

https://support.microsoft.com/en-us/lifecycle#gp/Microsoft-Internet-Explorer