Inline CSS for Header and Logo Looks different in Chrome and IE

Question

I have the below HTML with simple header and logo with inline CSS. I would like to get the same look in chrome and IE browser.

<html>
<title>Workflow Report </title>

<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      text-align: left;
      padding: 8px;
    }

    thead input {
      width: 100%;
      padding: 3px;
      box-sizing: border-box;
    }

    /* Header and Logo
-------------------------------------------------------------- */
    .navbar {

      margin: auto;
      background: #a3a3a314;
      color: #285a8b;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-logo {
      padding: 20px;
      flex: 1 0 0;
      text-align: right;
    }

    #logo {
      max-width: 120px;
      width: 100%;
      height: auto;
    }

    /* Inline bulleted lists
-------------------------------------------------------------- */

    hr.style14 {
      border: 0;
      height: 1px;
      background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
      background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    }
  </style>
</head>
<SCRIPT>

</SCRIPT>

<body>
  <div id="content">

    <nav class="navbar">
      <div>
        <h3 style="font-family:arial black;color: #285a8b;">Report</h3>
      </div>
      <div class="main-logo"><a href="#" class="navbar-brand"><img class="logo" id="logo" src="https://seeklogo.com/images/T/tenaga-nasional-logo-A5D1C313B0-seeklogo.com.png" alt="SC2 Logo"></a></div>

    </nav>

    <hr class="style14">

  </div>
</body>

chrome look appears as expected - ie with background color as #a3a3a314; and logo on the right but IE doesn't.

But IE looks different.

How can I get the same view as like chrome in IE? (with background color and logo at the right end )

Answer 1

You can try prefixing you code for navbar like this:

.navbar {
      margin: auto;
      background: #a3a3a314;
      color: #285a8b;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

Answer 2

Achieved using below css.

    /* Header and Logo
-------------------------------------------------------------- */
    .navbar {
      margin: auto;
      background: rgb(240,240,240);
      color: #285a8b;
      display: flex;
    }

    .main-logo {
      padding: 20px;
      flex: 800;
      text-align: right;
      float: right;

    }

    #logo {
      max-width: 120px;
      width: 100%;
      height: auto;
    }

Answer 3

Try this

.navbar {
  margin: auto;
  background: #f8f8f8;
  color: #285a8b;
  display: flex;
}

.main-logo {
  padding: 20px;
  flex: 800;
  text-align: right;
  float: right;

}

#logo {
  max-width: 120px;
  width: 100%;
  height: auto;
}

Inline CSS for Header and Logo Looks different in Chrome and IE

Question

3 answers

solution1
0 2019-11-01 10:01:25

solution2
0 2019-11-02 02:44:51

solution3
0 2019-11-02 02:54:29

Inline CSS for Header and Logo Looks different in Chrome and IE

Question

3 answers

solution1 0 2019-11-01 10:01:25

solution2 0 2019-11-02 02:44:51

solution3 0 2019-11-02 02:54:29

solution1
0 2019-11-01 10:01:25

solution2
0 2019-11-02 02:44:51

solution3
0 2019-11-02 02:54:29