CODEWITHSUNDEEP
cssstylesstylesheet
Arun
Arun

Reputation: 3721

:after, :before issues in internet explorer 11

In my website design, I am using :before and :after pseudo elements. These are working good in Google chrome and firefox. But having trouble with internet explorer.

The code I am using is

#nav ul li.active:after {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content: "";
  border-top: 13px solid rgba(2,155,223,0.9);
  position: absolute;
  bottom: -13px;
  width: 0px;
  margin-left: -20px;
}

and out puts are

1.In google chrome

Menu in google chrome

2.In internet explorer 11

Menu in internet explorer 11

is IE preventing this css? because all the styles with in ::before are shown as striked out in IE11.

here is the link to my website

Upvotes: 14

Views: 41922

Answers (1)

Kheema Pandey
Kheema Pandey

Reputation: 10265

You have to modified your CSS a little bit to align the drop arrow in all browsers including IE11. Please use this CSS.

#nav li{
  display: inline-block;
  position: relative; /*Added Line*/
}

#nav ul li.active:after {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
content: "";
border-top: 13px solid rgba(2,155,223,0.9);
position: absolute;
bottom: -10px; /*change from -13 to 10px*/
width: 0px;
/*margin-left: -20px;*/  /*REmoved Line*/
  left: 20px;/*Added Line*/
}

Upvotes: 7

Related Questions