March 1, 2012

setting overflow hides li bullets (overflow property conflict with list-style)

Question by missybecks

setting overflow and text-overflow property makes the li hide bullets. I’ve tried putting the bullets “inside” but it still didn’t show bullets. Plus I’d prefer to put it “outside”

ul.hbox_poplist {
    list-style: circle url('/img/bpt_clear.png');

ul.hbox_poplist li {
    margin: 0 0 8px;
    text-overflow: ellipsis;
    overflow-y: hidden;

does anyone know any solution to this?

Answer by Diodeus

Using a CSS background is much more dependable across browsers than using list-style-image for custom bullets. Controlling the position of a list-image is quite difficult on its own.

Something like:

.bullets {


Answer by Starx

I remember this problem long before. Yes, its better to follow to what @Diodeus suggests, but adding padding-left to the ul, miraculously solved my problem a couple of times.


Please fill the form - I will response as fast as I can!