Why using CSS3 columns in Chrome removes item numbers on lists

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?

Answers


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.


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

OL {
  list-style-position: inside;
}

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;

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;
}

Need Your Help

Best way to integrate PHP with asp.net / asp.net-mvc

php asp.net integration

By some coincidence this problem has come up twice in the last week.

Is there a simple way to check if an incoming caller is a contact in Android?

android contacts telephony

When an Android phone receives a call it automatically checks if the call exists in its own contact database. I was wondering if there is a simple way to access that information. I have a