Bullets disappear with CSS3 columns

Question

The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it?

See the example: http://jsfiddle.net/gduDm/1/

ul li {
    list-style-type: disc !important;
    column-break-inside: avoid;
}
ul {
    list-style-type: disc !important;
    margin-top: 1em;
    column-count: 2;
    column-gap: 0.5em;
}

Seessel

Answer 1

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

list-style-position: inside;

Cai

Yes, this is just because you are using jsFiddle, which doesn't show bullets properly. I wish they'd update their CSS on there. – Androgen

It actually didn't work in my site code either. The list-style-position worked perfectly though. Thanks for the help. – Seessel

Absolutely Andrew - glad that I could help! – Cai

That is a good work around but now the 2nd line of text doesn't line up with the first line. – Pigheaded

@Pigheaded Try adding left padding. – Cai

thanks, stupid bullets would disappear when I added overflow to the <ul> – Terceira

text-indent: -1em; padding-left: 1em; fixed the alignment for me – Offensive

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

Should your solution be set to ul or li? I am assuming ul. – Micamicaela

Answer 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/

Jemy

This (the 2nd solution proposed) is the superior solution IMO because the text alignment remains intact when list items overflow onto multiple lines. – Regulation

Answer 3

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

Recollection

Answer 4

After trying the first answer here, I was having issues with my list items spilling onto a second row and not lining up. Using column-gap I was able to move the second column over and see the bullets.

Source: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/

    <!– CSS CODE –>
    .two-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
    -moz-column-gap: 40px;
}

Evade

Just wanted to say that this saved my sanity after hours of investigating the cause of my custom list images (a pdf icon) were disappearing for the second column. – Ashelman

Answer 5

Some of the other solutions are pretty good, but all the ones I tried caused various side effects for me. I made some small tweaks and tried to get it as close to perfect as possible.

ul {
  column-count:2;
}

ul.solution {
  margin-left:-0.6em;
  margin-right:0.6em;
}

ul.solution > * {
  margin-left:0.6em;
  margin-right:-0.6em;
}

Experimental Group
<ul class="solution">
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>
Control Group
<ul>
 <li>
  This solution is pretty similar to the others.
 </li>
 <li>
  It does not require you to put the bullets inside, so you can keep your left edge clean if you want. 
 </li>
 <li>
  This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
 </li>
</ul>

Rationalize