inline bullets

Posted 2003-08-06 @ 16:25:33

Suppose you wanted to create an inline list with nice-looking bullets. Simple enough, no?

Since the list-style-* CSS properties only apply to elements with display:list-item, that's out. You might be able to use float:left, as long as you don't mind all the LIs having the same width, regardless of their content. (Don't forget, elements with float applied are required to have a width explicitly specified.) Or, you could add a bunch of IMGs to the document:

<ul>
  <li><img src="bullet.gif" alt="" />one</li>
  <li><img src="bullet.gif" alt="" />two</li>
  <li><img src="bullet.gif" alt="" />three</li>
  <li><img src="bullet.gif" alt="" />four</li>
  <li><img src="bullet.gif" alt="" />five</li>
</ul>

But, you don't want to add a bunch of crap to the markup, do you? No, the correct way to handle this would be by using generated content. Maybe something like:

li { display: inline; }
li:before { content: url(bullet.gif); }

...which Safari, Mozilla, and Opera render as something like this:

Beautiful! Unless you need to cater to that 97% of the market that still uses Internet Explorer, you're all set.

Still not happy? Want to appease the IE folks, while retaining some of your document's integrity (if not your own)? Here's a slice of Windows-specific JavaScript that inserts an IMG into each of the LIs, giving the same effect:

theLIs = document.getElementById('theList').childNodes;
theBullet = '<img src="bullet.gif" />';
for (var i = 0; i < theLIs.length; i++)
  theLIs[i].insertAdjacentHTML("afterBegin", theBullet);

(Obviously, you'd replace theList with your list's ID, and set the IMG's SRC attribute to the appropriate URL.)

li {
  display: inline;
  padding-left: 12px;
  background: url(bullet.gif) no-repeat;
  }