Sign in to follow this  
Chase

CSS Question

Recommended Posts

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>

image.php-2.png

Share this post


Link to post
Help AVSIM continue to serve you!
Please donate today!

Bump 

 

Did you get sorted Chase 

Share this post


Link to post

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

Share this post


Link to post

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?

Share this post


Link to post

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.

Share this post


Link to post

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.

Share this post


Link to post

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.

Share this post


Link to post

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? :dance:

Share this post


Link to post

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

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this