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
2.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
It is the successor to Internet Explorer 10, released the previous year, and was the original, default browser in Windows 8.1 and Windows Server 2012 R2, before Microsoft Edge was introduced. IE11 was also included in the release of Windows 10 on July 29, 2015, as well as in Windows Server 2016 and Windows Server 2019.
This is a reminder that Microsoft plans to retire and end support for the Internet Explorer 11 (IE11) desktop application on most versions of Windows 10 on June 15, 2022.
Support for Internet Explorer 11 has ended on June 15, 2022. If any site you visit needs Internet Explorer 11, you can reload it with Internet Explorer mode in Microsoft Edge. We recommend you use Microsoft Edge for a faster, more secure and more modern web browsing experience.
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*/
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With