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;
max-height:32px;
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 {
background-image:url(/img/bpt_clear.png);
background-repeat:no-repeat;
padding-left:30px;
margin-left:-30px;
}
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.
