Css of section and small tags are different in IE and Chrome

Question

I have this html to display a list of people, it contains name and status.

<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>

Here's a CSS that I'm using

ul.group li {
    border: 1px transparent solid;
    float: left;        /*  added  */
    min-width: 232px;   /*  added  */
}

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 problem is they're different in IE (what a surprise, right?).

Here's how it's being displayed in chrome

Here's how it's being displayed in IE

I have also created a fiddle: https://jsfiddle.net/083krhau/

What I need to change to make this html looks the same in both browsers?

Answer 1

I am asuming you are using an older version of IE, that was for me the way I could replicate the problem. Older versions do not support html5. you could include this in the head of your website:

<!--[if lt IE 9]>
    <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
    </script>
<![endif]-->

This will tell them that those tag are html tags as well. It is best to remove the tags you don't use

Another solution would be to replace the section with div