Sunday, July 14, 2013

Invisible Bullet Points Problem

I had an unordered list that had pesky bullets that would not display. The list was set to "display: block;" so why wasn't it showing up within its parent element? I tried fiddling with the "display" CSS setting of the ul element and its list items but no luck. I started searching for CSS attributes specific to li elements and found the list-style-position CSS attribute.

When I set this attribute to list-style-position: inside, the bullet points showed up nicely within the document. Setting "inside" ensures that the list items flow within the parent element, so no bullet points are hidden.

Here is a reference to this attribute from MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

No comments:

Post a Comment