CODEWITHSUNDEEP
htmlcsssasscross-browserinternet-explorer-11
George Welder
George Welder

Reputation: 4045

CSS - background-color not working in IE11

I have the following code:

.skills_column {
  padding: 50px !important;
  padding-top: 60px !important;

  &.--light {
    background-color: white;
  }
  &.--dark {
    background-color: #ced4db;
  }

  @include media-breakpoint-down(sm) {
    h1 {
      text-align: center;
    }
  }
}

There are 3 columns, a light one, and two dark ones. All of this works in Chrome & Firefox, however, it does not work in IE11:

While the light one is white as expected, the two other columns which are supposed to be dark, are also white when viewed in IE11.

What could the problem be? I also tried to add filter: none !important; because I read that somewhere, but that does not seem to make a difference although I might have not applied it correctly, I am not sure.

I am also using flexbox, if that should make a difference. But my problem here is with the background colors not being applied.

Upvotes: 2

Views: 6722

Answers (1)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

Can you try removing the double hyphen from your class names(--dark, --light). I have a feeling IE doesn't like BEM representations. Maybe single underscore or double underscore works.

.skills_column {
  padding: 50px !important;
  padding-top: 60px !important;

  &._light {
    background-color: white;
  }
  &._dark {
    background-color: #ced4db;
  }

  @include media-breakpoint-down(sm) {
    h1 {
      text-align: center;
    }
  }
}

Upvotes: 2

Related Questions