-1

I have a navber with a logo being centered using flexbox but in IE it is not properly centered. Does anyone know why this might be?

The dev build is at etc.lukesmedia.com

Thanks!

luke bouch
  • 49
  • 5
  • what version of ie? – DCR Feb 17 '21 at 21:31
  • All versions of IE. I'm most concerned about IE 11. – luke bouch Feb 17 '21 at 21:32
  • "all versions" as in IE6? You should be more specific about which versions you need to support. With that said, IE11 hits end of life this year, so you might not want to bother with it anymore. With _that_ said, here's a list of documented flexbox bugs: https://github.com/philipwalton/flexbugs – elliottregan Feb 17 '21 at 23:39

4 Answers4

2

IE doesn't like margin:auto.

You can use IE-specific css rule to remove it:

@media screen and (min-width:0\0) {
   .navbar .content{
      margin:none 
   }

}
Miro
  • 8,402
  • 3
  • 34
  • 72
2

In line 298 of your main.css file, you’re using text-align: unset, but IE doesn’t seem to like that. Try changing to text-align: left and that should work for everything.

Original

@media screen and (min-width: 700px) {
    .navbar .content {
        text-align: unset;
    }
}

Modified

@media screen and (min-width: 700px) {
    .navbar .content {
        text-align: left;
    }
}
Rich DeBourke
  • 2,873
  • 2
  • 15
  • 17
1

I try to visit the site using the IE 11 and Google Chrome browser.

I found that in the IE 11 browser the logo appears a little bit left from the center when the screen is bigger than 700px.

In the Chrome browser, When the screen is bigger than 700px then the logo appears on the left side, and when the screen is smaller than 700px then the logo appears in the center.

So it looks like you want to get similar results in the IE 11 browser.

I try to modify your CSS code to get similar results.

Below is the modified example:

<!doctype html>
<html>
<head>
<title>demo</title>
<style>
html,
body {
    margin: 0px;
    padding: 0px;
    min-width: 300px;
}
.navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    z-index: 100;

    padding: 20px 0px;
    height: 80px;

    background-color: var(--super-light-grey, white);
    -webkit-filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.07));
            filter: drop-shadow(10px 10px 50px rgba(0, 0, 0, 0.07));
}

.navbar .content {
  
    width: 80%;
    height: 100%;
    font-family: var(--main-font, sans-serif);
    font-size: 1.3em;
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.navbar .content img {
    height: 100%;
}

@supports not (-ms-high-contrast: none) {
  .navbar .content {
    margin: auto;
    width: 80%;
    height: 100%;
    font-family: var(--main-font, sans-serif);
    font-size: 1.3em;
    font-weight: 800;
    text-decoration: none;
    color: inherit;
    text-align: center;
   }
}

@media screen and (min-width: 700px) {
  .navbar .content {
        text-align: unset;
    }
  *::-ms-backdrop, .navbar .content {
        text-align: left;
    }
}

@media screen and (min-width: 800px) {
    .navbar {
        -webkit-box-pack: left;
        -webkit-justify-content: left;
        -moz-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
    }

}
</style>
</head>
<body>

  <HEADER class="navbar">
    <A class="content">
      <IMG alt="Education Transformation Centre Logo" src="logo.png"> 
    </A>         
  </HEADER>         
</body>
</html>

Note: I suggest you save the above code to the HTML file and modify the path for the logo and try to run it in the IE 11 browser.

Output in the IE 11:

enter image description here

After testing it with the IE 11 browser you can try to implement it in your original code to fix the issue. Further, you can try to modify the code based on your own requirements.

Deepak-MSFT
  • 10,379
  • 1
  • 12
  • 19
-2

Try using a different browser like chrome or firefox. IE is not good for HTML. Once you get to chrome or firefox in css of the object you should have text-align: center; and top: 50%;

Jake Cubes
  • 7
  • 1