Why using CSS3 columns in Chrome removes item numbers on lists

Question

I noticed that chrome was erasing the number on my list-items when I add css to manipulate column-count...

For instance:

<ol style =-webkit-column-count: 2;...">
   ....
</ol>

The above does manage to overflow li's into a separate column as intended but it removes the default item numbering as well. This doesn't occur in Firefox, only chrome.

Any ideas?

Registered

Can you make a jsFiddle please – Verlaverlee

I can't say I've used jsFiddle before, do you just want to see the html block and the pertinent css? – Registered

Yes, just a simple recreation of the problem would help. jsFiddle is relatively easy to use, once you add in your html and css click the save button, then click share and copy the link over to here. – Verlaverlee

Actually oddly enough when doing some testing with jsFiddle an ordered list didn't even have line numbering by default? see here – Registered

Yeah that is really weird, maybe post your own page if you have access to hosting? – Verlaverlee

Answer 1

You can always just throw a <div> around the <ol> and give the <div> multiple columns instead of the <ol>.

<div style = -webkit-column-count: 2;...><ol>
    ....
</ol></div>

When I do that, however, I end up with the 2nd column being one line higher than the 1st column for some reason. Also only happens in Chrome.

Edit: Solution to my above problem was just to add a zero margin for the <ol>, so this should work fine:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;>
    ....
</ol></div>

Oddly enough, having some padding on the <ol> seems to get rid of the numbers as well, so if you have padding somewhere that might be the culprit.

Lavinia

I think it ended up being padding as I was playing around with that at one point and I noticed that the numbers suddenly appeared one day. Either that or it fixed itself. – Registered

Look at the answer from this question #12357968. This is a good solution as when you get over 10 list items, the numbering might become left align which can make the li tags content look misaligned. – Breadboard

Answer 2

It seems the numbers are actually hidden. This can be resolved by using the following property:

OL {
  list-style-position: inside;
}

Cundiff

Answer 3

Often one's style sheet would have an html reset, among which there is a padding: 0; reset on list items.

while the following, by Stéphane works like a charm,

ul {
  list-style-position: inside;
}

you can also give your list items a padding-left:

padding-left: 16px;

Cephalometer

At first I didn't think this worked, but then I realized in my case I needed to add more than just 16px of padding. Thanks! – Outlander

Answer 4

For some reason list styles positioned outside the element (the default) are hidden when you apply the column-width rule. The below is the best I could come up with to try and emulate 'expected' behavior in Chrome based on the other answers and my own experimentation.

Demo

HTML

<div class="col-wrapper">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ol>
</div>

CSS

.col-wrapper {
    -moz-column-width: 200px;
    -moz-column-gap: 1em;
    -webkit-column-width: 200px;
    -webkit-column-gap: 1em;
    column-width: 200px;
    column-gap: 1em;

    /* (optional) use ol's margin here */
    margin-top: 16px;
}

.col-wrapper ol {
    /* clear top margin of ol */
    margin-top: 0;
}

Build