Ie CSS Alignment Issues

Issues with CSS alignment in Chrome and IE10

From the screenshot, it looks as though the <fieldset> is having display: block; applied in chrome and FF, which is what causes it to expand to the maximum width available in the parent. The IE screenshot, however, looks as though it is having display: inline applied to it, which causes it to behave like a <span>, taking only as much space as is necessary to contain its child elements.

That's just how it looks, however. I can't give a definitive answer without knowing what the style is that's actually being applied to the element. You can figure this out by pressing the f12 button while in IE10, that brings up their equivalent of debug tools. You'll want to look under the "computed" tab next to "styles" to see what the final style is that is being applied to the element.

Centering elements doesn't work in Internet Explorer

The problem is caused by a combination of two factors:

conflict between author and Bootstrap styles
faulty IE rendering behavior

This is the code at issue:

Bootstrap styles:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;   /* <-- source of the problem in IE */
    margin-left: auto;    /* <-- source of the problem in IE */
}

Author styles:

.content-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* <-- source of the problem in IE */
    float: none;
    max-height: 30%;
}

To make a long story short, for the content to center properly in IE use either auto margins or justify-content: center.

Using both breaks the centering in IE because of faulty implementation of CSS priority.

For details see my answer here: Flex auto margin not working in IE10/11

Revised Demo (with justify-content disabled)

CSS alignment issues Internet Explorer

Where–and what–is your doctype? The page is being rendered in quirks mode because you didn't specify anything.

In a recent version of IE, load your page and hit F12 to open the developer tools. Along the top of the window/panel, you'll see "Browser Mode: [something] Document Mode: [something]" Click the Document Mode section, and select any of the "standards" options to change the rendering behavior, and you should see your expected results. To actually make the browser do that on its own, though, you need to include a proper doctype.

IE CSS alignment issues

Whoa. Yeah, don't do that. You'll want o look at using "conditional comments" to include the css you want. Your first commenter bendewey has shown how you can target IE7 easily. There are other types of conditional comments as well which will allow you to target other versions of IE.

Here they are:


<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

If you plan on doing a lot of adjustments for different versions of IE, you might plan ahead and use the "body class" trick. It looks kind of ugly in the markup, but it's a proven technique and sometimes it beats having lots of style sheets and style tags.

Here it is:


<!--[if !IE]>--><body><!--<![endif]-->
<!--[if IE 6]><body class="ie6"><![endif]-->
<!--[if IE 7]><body class="ie7"><![endif]-->
<!--[if IE 8]><body class="ie8"><![endif]-->

And in your style sheet, you'd just reset any style you want by tacking on a class to the selector. Like this:


#some_div {
     margin-top:30px;
}
.ie6 #some_div {
     margin-top:40px;
}
.ie7 #some_div {
     margin-top:50px;
}

Hopefully that makes sense. Either way, it's conditional comments you'll want to use instead of PHP.

Angular Material and IE : Can't layout-align=center center in Internet Explorer

I've found a solution for your problem

You only have to replace this block of code (written by you)

<div layout="row" layout-xs="column" >
  <div flex>
    <p id="button-debutant" class="rcorners">Débutant</p>
  </div>
  <div flex>
    <p id="button-intermediaire" class="rcorners">Intermédiaire</p>
  </div>
  <div flex>
    <p id="button-confirme" class="rcorners">Confirmé</p>
  </div>
</div>

with this one:

<div layout="row" layout-xs="column" layout-align="center center" >
    <div>
        <p id="button-debutant" class="rcorners">Débutant</p>
    </div>
    <div >
        <p id="button-intermediaire" class="rcorners">Intermédiaire</p>
    </div>
    <div>
        <p id="button-confirme" class="rcorners">Confirmé</p>
    </div>
</div>

Basically you will force IE to consider the three button as an unique row, while the layout-align="center center" written before (where there is the ng-repeat) will align the whole portion of page in the center of the page (both vertically and horizontally). I don't why IE requires this little extra work but it works :)

I hope I helped you