Discuss: Bulleted Lists: Multi-Layered Fudge
by Nandini Doreswamy
- Editorial Comments
32 semantics semantics semantics
if the html is semantically incorrect like this, then what was the point in using webstandards in the first place?
i see no benefit in this method, sorry
posted at 01:11 am on February 17, 2005 by Chris Ward
33 swing and a miss
Is it just me, or have the overall quality of ALA articles gone down over the last year or so? I almost seems as if this article was written just to get to the final link to the services page for her company. But if you look at this page, there is no reason to separate these into separate lists. The floated, 50% width LI solution that many have proposed (and that I actually used on a site a while back) would work just as well, be more semantically correct, and be simpler to maintain.
posted at 01:23 am on February 17, 2005 by Joe
34 I got the point
Sorry, now I understand the vertical order of the items was the goal of the article, but IMHO if you really care of what is your reader reading order or direction… just make an old fashioned single column list. Splitting it (I mean visually) in two columns, don’t assure you what direction your reader is assuming, it can vary from nationality, instinct etc.
Ok, let’s consider that you really want it:
1 3
2 4
why don’t simply write <li>s in a different order and use a single ul with lis floatted? ok, noCss users wil read it in a different order, but you can make a choice estimating the non-css percentage of your users. An Most of all… is that list a truly ordered one? Does it explain ordered steps of a process? It’s an unordered list and so I think it’s possible to shuffle items without losing interest.
About the table, it cannot be the correct way (even if the easier). The content of the articles list semantically represents a list, not a table… it hasn’t row-columns relationships as could be in a leaving-arrival table in the train station. A single column table is simply not a table.
Ok, finished (sorry for bad eng.)
posted at 01:29 am on February 17, 2005 by Pierluigi Pesenti
35 Fighting default padding
The thing that frustrates me about this, and many other, techniques, is all the fiddling required to counteract default padding (the no-space class, etc).
I guess there’s no answer here, as browsers implement different defaults, but all the “compatibility” CSS styling (as opposed to “presentational” styling) hides the basic intent of the stylesheet. And when you have to add classes to the HTML markup, that’s even more intrusive :-(
I’d love to see an article on how to work around browser defaults like this in as non-intrusive a manner as possible.
posted at 02:05 am on February 17, 2005 by Paul Moore
36 List order
Having a list in the order…
1 2
3 4
…can be handy for long lists. It means you don’t have to scroll back up the page once you’ve read to the bottom of the first column.
As for the article, I agree it’s not a great method but it’s sure prompted a lot of people to do their own experiments. That’s great.
posted at 02:08 am on February 17, 2005 by Charles Worm
37 nth-child
This is were we need to use the nth-child selector :)
You can have a one-list, semantic correct solution if you used it.
posted at 03:06 am on February 17, 2005 by Chris Eidhof
38 nth-child revisited
Oh no, that was just stupid. It wouldn’t solve anything.
posted at 03:07 am on February 17, 2005 by Chris Eidhof
39 list order
the list order shouldn’t matter anyway, ‘cause we are playing with an unordered list, so all the float examples do comply, but I guess for further discussion let’s assume the order is of importance and we’re dealing with an ol.
posted at 04:27 am on February 17, 2005 by Rikkert Koppes
40 The Semantics of Spilt Lists
What if I am using lists to list product features, steps in a process, etc. and I need a paragraph of text giving some explanation or background between items 3 and 4?
How many developers here would split the items into list-paragraph-list, and how many would keep them all in one list, use CSS to bump up the spacing between items 3 and 4, then absolutely position the paragraph between them?
I’m not sure I’m happy about using two lists for a purely visual effect, but in my example above, I would easily put myself into the first group of developers. Not only is that solution easier to implement, it has a much better chance of consistently communicating across various browsers, screen sizes, and user font-settings.
Where do we draw the line between semantic purity and effective communication? Will splitting the list cause a difficulty in screen readers or indexing devices? At what point can I allow other considerations to outweigh semantic purity “for the principle of the thing?”
posted at 05:00 am on February 17, 2005 by Philip Ledgerwood
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)



31 IMHO
Why bother with two lists and classified paragraphs? Floatting <li>‘s in a single list as mentioned above would be enough to reach the same effect, but correct semantically and for people with css disabled. No problems of two UL’s width and margins, just one padding and margin setting in the main list and some rule for the li’s… and less problems with paragraphs too.
posted at 01:09 am on February 17, 2005 by Pierluigi Pesenti