41 Re: Default paddings and margins

@Paul Moore:

Try looking into Tantek’s undohtml.css
http://tantek.com/log/2004/undohtml.css

posted at 10:10 am on February 17, 2005 by Arikawa

42 Re: I got the point

I agree with Pierluigi Pesenti. This was by definition an unordered list, meaning that the order of the items did not matter.

However, this may be being a bit pedantic.

posted at 11:08 am on February 17, 2005 by Leszek Swirski

43 The real solution

I’m surprised no one has figured out how to make it look like this yet:

1 4
2 5
3 6

CSS3 actually provides a perfect and elegant solution.

Literally ALL you need to do is:

ul{ column-count:2; }

See it in action at http://www.xs4all.nl/~berendse/ala/listfudge.html

Unfortunately, Mozilla-only, of course ;), for now…

Another thing that’s great about this, if your IE doesn’t get it, it will still look just like a regular list. No weirdnesses in your styles because of incorrect floats!

posted at 11:31 am on February 17, 2005 by Arnoud Berendsen

44 Why not Use Javascript?

Seems like a perfect situation to use javascript because it preserves semantics, while providing the desired visual effect. My strategy is to use DOM to replace the list with a div containing two lists. Set class names on the lists and the div to ensure the css doesn’t affect other elements that shouldn’t float. Keep the css as is, but use contextual selectors.

http://chriscassell.net/projects/js/layeredfudge/

Works in (at least) Safari 1.2, Firefox, IE6. Obviously, it could be encapsulated and genericized a little more, but it’s just proof of concept.

posted at 11:58 am on February 17, 2005 by Chris

45 Javascript indeed

I agree. Javascript is the way to go here.

Imagine how this page would look on lynx or with CSS disabled: like two confusingly-separated lists. I suggest that one ul is used, and the javascript DOM finds all li’s within the ul. It should count them and float the second half to provide a list like this:

1 4
2 5
3 6

Or it should just float every other li to create one like this:
1 2
3 4
5 6

This method uses HTML, CSS, and javascript appropriately. HTML only for markup, CSS only for the look and feel, and javascript to add an extra, yet not necessary or relied-upon, touch.

posted at 01:20 pm on February 17, 2005 by Mickey Reiss

46 much ado about little

I have to agree with Chris Cassell’s aproach to separating lists for the purpose of presentation – lets avoid the bizarre code and CSS hacks, and let JavaScript do it. Isn’t it ironic that this point has to be made again so soon after PPK’s article on Alistapart?

Barring a successful way to implement this with JavaScript, there is no reason other than stubborn CSS-geek orthodoxy not to do this with a table. I understand that the list items are not meant to be regimented into row-column logic, but a table can produce the desired reading order without the fuss, even for the visually impaired. If we really need to order the lists,

1 3
2 4

simply put 1 & 2 in the same cell and 3 & 4 in the other and be done with it. There are more important things to worry about, like no pro hockey this year.

posted at 01:27 pm on February 17, 2005 by Jeff

47 Hold the front page

Not quite the same, but I played with this a wee while back.

http://www.stuffandnonsense.co.uk/archives/hold_the_front_page_example.html

posted at 02:00 pm on February 17, 2005 by Malarkey

48 Author's comments

Thank you all for the constructive criticism. I’ve learned a lot.

I do have a couple of questions, though. At the start of the article, I’ve said that I had bulleted lists in mind. Aren’t bulleted lists, by definition, unordered lists, as opposed to numbered lists which are ordered? Also, I would really like to learn more about what’s wrong with the semantics. Is there any reference where I could read more about this?

I feel compelled to respond in particular to Joe, who commented, “…seems as if this article was written just to get to the final link to the services page for her company.” (‘swing and a miss’ – 17th February). The service page in question deals with computer systems and wireless LANs in Auckland, New Zealand. Surely, getting hits from serious web designers from around the world would not be the way to get more business in these unrelated fields. I rest my case.

Thanks again.

posted at 02:36 pm on February 17, 2005 by Nandini Doreswamy

49 Provocative article, thanks!

We found one answer with floats, one with javascript, and one with a widely unimplemented web standard. And your approach is still headed in the right direction if the lists are truly different lists.

You could also maintain a single, classed, but unstyled list in your content management system, and have your page building software transform the single list into anything you want. That would make maintenance easy, but break the semantic purity for readers. In some cases, readers might not care.

The part of the discussion that strikes me is that the order of items mattered to people, even though it was supposedly an unordered list.

I wonder, then: If I list items alphabetically, is this not an ordered list? And isn’t the number associated with an item purely presentational — not ‘semantic’?

posted at 04:40 pm on February 17, 2005 by J. R. Boynton

50 to nandini

not sure what you mean, but I’ve written an article about class and sematics once: http://www.rikkertkoppes.com/thoughts/class-and-style

while that’s most about classnames, there’s another thing about splitting the list and the discussion about ordered and unordered lists as well.

Well, in case of unordered lists, the order sould not matter at all, so every order should be ok, including floated solutions. In case of a preintended order (alphabetically, in order of importance or anything else), your problem is one that could not be solved with ordinary (2.1) CSS (except for absolute positioning as I mentioned), CSS 3 however, will fix this with the column construct, which will probably be implemented with FF1.5 (but that’s another story).

As I see, the only way to solve this problem is to do it with absolute positioning, as I’ve sais before. The reason I brought this up is the resempblance with another problem (organisation charts), about whitch I will publish an article in the next few days

posted at 05:07 pm on February 17, 2005 by Rikkert Koppes