<ul> Formatting with CSS.

June 12, 2003, 11:06 am

Yesterday, I was helping Jesse figure out why his CSS was broken. He wanted to style a <ul> like a horizontal menu, and also change the marker image. He started out with:

ul.fleur li {
list-style-image: url(images/fleur.png);
display: inline;
}

That produced a result like this:

I couldn't figure out why the list-style-image marker wasn't showing up until I read the W3C CSS Spec about the display selector:

inline
This value causes an element to generate one or more inline boxes.
list-item
This value causes an element (e.g. LI in HTML) to generate a principle block box and a list-item inline box. ...

I hadn't known that <li> had a special display type, but it makes sense: they're special because they have generated content before them (the marker) and have to worry about nesting and counting (if it's an ordered list). So changing the display type to inline will remove the special marker-ness associated with the list-item type.

The only solution I could come up with yesterday was to use the :before pseudo-element with the content property:

ul.fleur li:before {
content: url(images/fleur.png);
display: inline;
}

That worked, but (to my knowledge) only on Gecko-based browsers, which isn't very useful to us.

Then I was reading blogs and read Eric Meyer's blog entry about tab interfaces using unordered lists. Instead of using display: inline;, he used float: left;! I tried it out and it works! Check it out:


I can't wait to show Jesse.