IE list-style-position:inside issues

Question

Hi I'm having issues with list-style-position: inside when using IE. On Firefox or Chrome it does not seem to have this problem.

ol.myList { list-style-position:inside; }
ol.myList li { padding:20px 10px; font-weight:bold }
ol.myList li p { font-weight:normal }

<ol class="myList" start="1">
    <li>
        <h4>My Title</h4>
        <p>My Details</p>
    </li>
</ol>

On Chrome/Firefox it shows like this:

1. My Title
My Details

But on IE it shows this:

1.
My Title
My Details

Any suggestion in order to get it to work on IE?

Answer 1

This is an inconsistency among browsers. Firefox displays the number/bullet on a separate line, as does IE.

Use display: inline-block on the h4 and *display: inline; zoom: 1; for IE7.

ol.myList li h4 {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Quote from the Mozilla documentation regarding this issue: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Browser_compatibility

N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.

Answer 2

Ah Pek, try this:

ol.myList li h4 { display: inline-block; }

or

ol.myList li h4 { display: inline; }