I am attempting to create a process roadmap by using background images on list items.
The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc).
CSS CODE
body{padding: 50px 0;}
.status-line {
width: 80%;
margin: 0 auto 3%;
}
.status-line ul li {
text-align: center;
width: 25%;
background-image: url("../images/middleCircle.png");
background-size: 190px;
background-repeat: no-repeat;
float: left;
}
.status-line ul li:first-child {
background-image: url("../images/first-circle.png");
}
.status-line ul li:last-child {
background-image: url("../images/endcircle.png");
background-size: 34px;
}
.status-line span {
padding: 7px 0 2px 0;
width: 24px;
text-align: center;
border-radius: 50%;
margin: 3px 0 0 8px;
color: rgb(153,153,153);
font-size: 12px;
display: inherit;
}
.status-line #step3{
padding: 7px 0 5px;
text-align: center;
width: 24px;
}
.status-line ul li:first-child span {
margin-left: 3px;
}
.status-line ul li .process-done {
padding: 20px 0 4px 0;
background: #0abc70 url("../images/tick-mark.png");
background-size: 12px;
background-repeat: no-repeat;
background-position: 50%;
}
.status-line ul li .processing {
background: #5776e3;
color: #ffffff;
}
HTML CODE:
<ul class="cf">
<li><span id="step1" class="process-done"></span>
<h1>Application<br> Received</h1>
</li>
<li>
<span id="step2" class="process-done"></span>
<h1>Requirements<br> Received & Reviewed</h1>
</li>
<li>
<span id="step3" class="processing">
3
</span>
<h1>Offer</h1>
</li>
<li>
<span id="step4">
4
</span>
<h1>Offer <br> Accepted</h1>
</li>
</ul>
I have attached screenshots displaying how it appears in IE, Chrome, and Firefox.
Any assistance would be greatly appreciated.