I am using a div to represent a lesson that is dynamically filled up with a green span based on the student's completion percentage of the lesson. The height of the span is dynamically assigned for this purpose. While this functionality works seamlessly in most browsers, it encounters an issue when viewed on Internet Explorer. In IE, the span does not start from the bottom of the div as intended, instead appearing halfway through the middle. This discrepancy can be observed in the images below, which showcase the first lesson at 100% completion and the second lesson at 25% completion:
Browsers like Chrome, Firefox, Safari, and Opera display correctly:
Issue occurs on Internet Explorer:
The HTML code I am using is:
<div style="display:table; margin:0 auto;">
<div class="detail_image">
<div class="detail_image_cont">
<img src="images/thamatho/chapters/img.png" />
</div>
<span style="height:<?php echo $completepercentage."%";?>">
</span>
</div>
</div>
The corresponding CSS code is:
.detail_image{
display: table-cell;
border: 4px solid #39C;
width:48px;
height:48px;
vertical-align: middle;
text-align:center;
-webkit-border-radius: 35px 35px 35px 35px;
-moz-border-radius:35px 35px 35px 35px;
border-radius: 35px 35px 35px 35px;
position:relative;
overflow:hidden;
background-color:transparent;
}
.detail_image > span {
width: 101%;
overflow: hidden;
left: -0.4px;
position: absolute;
background-color: #CFC;
bottom: 0px;
height: 0%;
z-index:1;
}
.detail_image_cont{ /* to center image in the div */
display:block;
width:100%;
text-align:center;
margin:0 auto;
position:relative;
z-index:999;
}