Geek Answers Handbook

IE List Style Position: Internal Issues

Hi, I am having problems with list-style-position: inside when using IE. In 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>

In Chrome / Firefox, it looks like this:

 1. My Title My Details

But in IE, this shows:

 1. My Title My Details

Any suggestion to make it work in IE?

+6
source share
2 answers

This is a mismatch between browsers. Firefox displays the number / marker on a separate line, just like IE does.

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

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

A quote from Mozilla's documentation on this issue: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Browser_compatibility

NB There is a difference in behavior between browsers when a block element is first placed in a list element declared as a list-style-position: inside. Chrome and Safari place this element on the same line as the marker field, while Firefox, Internet Explorer, and Opera place it on the next line. For more information about this, see this Mozilla error message and example.

+8
source

Ah pek, try the following:

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

or

 ol.myList li h4 { display: inline; }
+2
source

More articles:


All Articles