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?

Did you have a look at [this question](http://stackoverflow.com/questions/2799874/ie8-playing-funny-with-list-style-position-inside)? — Two-Bit Alchemist, Mar 17 '14 at 18:49
Fix your faulty HTML first – `ol` can only have `li` as children, the `br` have no place being there. And why do you put a `br` as first element into the `li`, if you don’t want a line break there …? — CBroe, Mar 17 '14 at 18:51
@CBroe Hi I fixed the HTML already, which is supposedly to be shown as above now. As just now when I copied and paste my code into the textbox just now it didn't accept under the coding blocks and directly interpret it to HTML and not showing the HTML codes instead. — Osirus, Mar 17 '14 at 19:01
@Two-BitAlchemist Hi, I tried adding to **display:inline-block;display:inline;zoom:1;** apparently the number went missing. — Osirus, Mar 17 '14 at 19:07

Aleksander Bavdaz · Accepted Answer · 2014-03-17T19:46:20.967

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.

Hi. Thank you for this. Was pulling my hair out wondering what was wrong with it. Really appreciate it! Thanks! — Osirus, Mar 18 '14 at 02:50

score 2 · Answer 2 · answered Mar 17 '14 at 19:31

2

Ah Pek, try this:

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

or

ol.myList li h4 { display: inline; }

answered Mar 17 '14 at 19:31

Leann

216
2
4
10

Hi Leann. Thanks for helping out. Really appreciate it! – Osirus Mar 18 '14 at 02:51

IE list-style-position:inside issues

2 Answers2