Question

There’s something wrong with my CSS-code for a list. Indentation of second (and further) lines of list items are not correct in IE, but okay in other browsers. See: http://jsfiddle.net/nXYee/

Any idea?

IE8 gives this result:

Chrome, Safari and FF give this result:

Answer 1

This occurs because you’ve placed the bullet inside the list item (list-style-position:inside;), and the browser controls the space between the bullet and the li content, not you. Internet Explorer assigns more space between the bullet and the content than the other browsers you mentioned.

The fact that your indented content aligns correctly in Chrome/Safari/Firefox is because those browsers all implemented the same (or similar) distance between the bullet and the li content, so a text-indent of 1em gives you a visually consistent result – but really this visual consistency is just a fluke.

(In fact, if you check closely you’ll notice that Firefox is slightly out too).

If you feel it is necessary to display the bullet inside the list items, then you may find you need to use a conditional comment to feed different text-indent and padding-left values to IE (e.g. 1.5em/-1.5em) – but that will break in IE10, which doesn’t support conditional comments.

Personally, I would keep the bullets outside the list items, since I think you’ll find it much easier to get a consistent result.