Bullets disappear with CSS3 columns

Solution 1:

I think the bullets are there, but they're being rendered to the left of the viewing area. Try:

list-style-position: inside;

Solution 2:

Adding both padding-left and a negative text-indent to the list elements seems to produce the desired result:

ul li {
    padding-left: 1em;
    text-indent: -1em;
}
ul {
    list-style: inside disc;
}

http://jsfiddle.net/mblase75/gduDm/4/

Alternatively, add a margin-left to the list element (instead of the list) and use outside bullets:

ul li {
    margin-left: 1em;
}
ul {
    list-style: outside disc;
}

http://jsfiddle.net/mblase75/gduDm/9/

Solution 3:

Setting margin-left:1em makes the bullets appear without messing with the text indentation.