I've been working on a timeline project where the completed sections should have a green background with a check mark image in the foreground. It appears correctly in Firefox, Chrome, and Safari.
However, in IE 7 and 8 (and possibly 9), the layout is incorrect. I've tried various techniques like z-index manipulation but haven't found a solution yet. I even came across an article suggesting a potential fix, which unfortunately didn't work.
If anyone has any insights or suggestions on how to make the checkbox appear in front of the green background in IE, I would greatly appreciate it!
Below is a simplified version of my CSS:
.timeline-container {
width: 820px;
height: 50px;
}
.timeline-step {
width: 164px;
height: 22px;
float: left;
background: url(https://i.stack.imgur.com/amRJt.png) -10px 0px no-repeat;
}
.complete {
background: url(https://i.stack.imgur.com/NgSG6.png!) -10px 0px no-repeat;
position: relative;
}
.complete img {
position: absolute;
top: 5px;
left: 50%;
right: 50%;
}
.timeline-divider {
background: url(https://i.stack.imgur.com/AJw3e.png);
height: 30px;
width: 1px;
float: right;
}
.timeline-label {
color: #C5C5C%;
font-size: 12px;
font-weight: bold;
width: 100%;
display: block;
float: left;
text-align: center;
}
And here's a simplified version of my HTML:
<div class="timeline-container">
<div class="timeline-step complete">
<img src="https://i.stack.imgur.com/hS83c.png" alt="complete" />
<div class="timeline-divider">
</div>
<span class="timeline-label">Confirm Eligibility</span>
</div>
</div>
If you want to see the issue in action, you can check out this JFiddle link: http://jsfiddle.net/SY9q5/