StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>That's the question that's been bothering me for some time as well.</p> <p>First of all if we look at the spec describing the <code>list-style-position: outside</code> property we will see that </p> <blockquote> <p>"CSS 2.1 does not specify the precise location of the marker box or its position in the painting order".</p> </blockquote> <p>This actually makes this situation not a bug, merely different implementations.</p> <p>IMO Opera and IE9 make it closer to the spec - which is to put the marker... well... outside the box. In case of floats the box made by the <code>li</code> element is still full-width, only content is shifted inside of it.</p> <p>I tried to think of alternative solutions but they still turn out to be inappropriate and cause more problems than they solve. An example of using css3 <a href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment" rel="nofollow">counter increment</a> can be seen here: <a href="http://jsfiddle.net/s3sZS/3/" rel="nofollow">http://jsfiddle.net/s3sZS/3/</a>, but visually it looks like <code>list-style-position: inside</code> (your indentation problems remain) and the increment itself is selectable and copyable (at least in Opera).</p> <p>Actually <code>list-style-position: inside</code> looks like the only appropriate solution to this imo.</p> <p>If you are interested in future implementations of lists - you may read the <a href="http://dev.w3.org/csswg/css3-lists/" rel="nofollow">CSS Lists and Counters Module Level 3</a> (currently Editor's Draft).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload