How to fix list style not showing when using CSS3 columns on Webkit

Question

example here: http://jsfiddle.net/R7GUZ/3/

I'm having a heck of a time getting list-style to work in webkit for a parent OL styled with

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

How do I format an ordered list into columns with css3 and still maintain the list-style styling?

           <ol class="text-col2">
                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>

                <li>
                    <strong>Can we call you?</strong>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
                </li>
            </ol>

​

Straub

Answer 1

Adding 20px margin-left to the lis did the trick

ol li {
   list-style: decimal;
   margin-left: 20px
}

Straub

Thanks, this issue was driving me crazy until I figured it was a column v list-style-image problem. Your solution works, although I also removed padding-left from the ol/ul element so that I didn't unnecessary extra spacing. – Takara

Answer 2

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

OL {
  list-style-position: inside;
}

Note if you have reset the margin and padding properties (like in your example on jsFiddle where CSS have been normalized), you will have to set them to the right values so columns are correctly formatted.

Larios