Trying to create an icon using a background-image for a link, but encountering issues with positioning in IE. Made adjustments to position and display properties without success.
.page {
color: #ffffff;
height: 75vh;
min-height: 850px;
padding-bottom: 0;
}
.page ul.col-2 {
height: 100%;
padding: 0;
font-size: 0;
position: relative;
background-color: #f49841;
}
.page ul.col-2 li {
height: 100%;
width: 50%;
display: inline-block;
font-size: 12px;
vertical-align: top;
overflow: hidden;
position: relative;
}
.page ul.col-2 li ul.line-2 {
padding: 0;
height: 100%;
}
.page ul.col-2 li ul.line-2 li {
list-style: none;
vertical-align: top;
width: 100%;
}
.page ul.col-2 li ul.line-2 li:nth-child(1) {
background-color: #4286f4;
height: 30%;
}
.page ul.col-2 li ul.line-2 li:nth-child(2) {
height: 70%;
}
.page ul.col-2 li ul.line-2 li ul.col-2 {
padding: 0;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li:nth-child(1) {
background-color: #40ed48;
}
.page ul.col-2 li ul.line-2 li ul.col-2 li:nth-child(2) {
background-color: #ed3f3f;
}
.page ul.col-2 li ul.line-2 li .my-link {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/16/Deletion_icon.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
padding-right: 30px;
color: inherit;
text-decoration: none;
}Investigating further, the issue seems to be resolved temporarily inside the snippet.
Attached is a picture of the code: https://i.sstatic.net/uYd8d.png
Upon updating the code snippet to provide better context around the link, there's still a discrepancy in how it appears on my environment. Picture reference: https://i.sstatic.net/kcMTJ.png
It appears that the background-position remains centered regardless of the set value.