28. January, 2003 - playing with lists and CSS

I've got a partial solution to Dave Winer's query about the table on weblogs.com. Apparently he's just concerned about the inner bits, so that's all I'm tackling. But I don't see a need for three colums. He's got two columns of ordered data, with a number out front. Sounds like an ordered-list in HTML:

first try (works in IEMac)

  1. Weblog1 name 1:23
  2. Weblog2 name with different length 1:22
  3. Weblog3 name 1:22
  4. Weblog4 name 1:21
  5. Weblog5 name 1:21
  6. Weblog6 name 1:20

But I noticed that that's ill-behaved in Mozilla on the Mac: how it looks in Moz so some more tinkering is needed. By adding a div with a style of clear, I can get Moz to display each item on its own line, but there's extra whitespace in between the lines:

second try (closer?)

  1. Weblog1 name 1:23
     
  2. Weblog2 name with different length 1:22
     
  3. Weblog3 name 1:22
     
  4. Weblog4 name 1:21
     
  5. Weblog5 name 1:21
     
  6. Weblog6 name 1:20
     

Okay, this is kludgy, using an almost-empty div with a style of clear:left to force each list item to stand on its own, but there's something wacky about Moz's handling of float that I don't think I quite understand (if you look closely at the picture above, you'll see that the time for each blog is on the line of the blog after it). I've seen this problem before. My permalinks do the same thing in IE6Win.

Well, drat. I had an idea to try one table per line, and that didn't work reliably. I don't know if I can make one that works right in all cases, due to the different handling of float in IE and Moz (I have no idea which is "Correct", and iCab's CSS support isn't up to the job, and I can't run Safari right now because I'm in Mac OS 9).

I need to get some breakfast and head off to a client meeting soon. Hopefully my idea will inspire someone else to come up with a complete solution. Suggestions welcomed.

Y'know, one thing that would make this all easier would be for the browser people to publish a list of what they think the default styles for each element are. I remember seeing one that described the HTML 4 elements with a style for each element. It let you change the doctype from HTML to XML+CSS, and by including the style-sheet, you'd have the same rendering as HTML 4 in whatever browser. Publishing that sort of information for all the browsers might help people like me understand why various browsers handle style differently. Consider that my lazyweb contribution for the day.

Followup: 16:30CST

third time's the charm?

Stéphane Volet suggests the following via email:

  1. Weblog1 name 1:23
  2. Weblog2 name with different length 1:22
  3. Weblog3 name 1:22
  4. Weblog4 name 1:21
  5. Weblog5 name 1:21
  6. Weblog6 name 1:20

which seems to work just fine. Dave Winer also has a fix, and is using it on weblogs.com. Yay! Dave managed to use the LazyWeb to solve his problem. And I get a fix that seems to work for my permalinks so they end up looking right in both IE and Moz.

Copyright 2009, Dave Polaschek. Last updated on Mon, 15 Feb 2010 13:53:15.