I am working on an HTML code to showcase a list of individuals, including their names and statuses.
<section class="box-time">
<ul class="group">
<li>
<a class="fancybox fancybox.ajax" href="../loadFancybox.php">
<span class="info">
<strong>Name</strong>
<small>
<p id="pStatus" class="colorRed">Pending</p>
</small>
</span>
</a>
</li>
</ul>
</section>
Below is the CSS styling I have applied:
ul.group li {
border: 1px transparent solid;
float: left;
min-width: 232px;
}
section.box-time li:hover{
background-color:#9495A8
}
section.box-time li a{
margin:0 10px;
padding:15px 10px;
display:inline-block;
*display:inline;
*zoom:1;
color:#444;
}
section.box-time span.info{
display:inline-block;
*display:inline;
*zoom:1;
margin-left:5px;
width:185px;
max-height:45px;
vertical-align:middle;
white-space:normal
}
section.box-time span.info small {
font:11px/1em Arial,sans-serif;
font-weight: bolder;
margin-top: 5px;
}
section.box-time span.info small p.colorRed{
color:red;
}
section.box-time span.info small p.colorBlue{
color:blue;
}
section.box-time span.info small p.colorGreen{
color:green;
}
The issue arises when viewing in IE, where it looks different compared to Chrome.
Here is how the content appears in Chrome:
And this is how it displays in IE:
A live demo can be seen here: https://jsfiddle.net/083krhau/
What changes should I make to ensure consistent display across both browsers?