21 Overlapping Text

As text is resized in the user’s browser, the text begins to overlap and do all sorts of crazy things (I’m referring to the finished example given in the article). Actually, after the second paragraph, “

1. Item 2 Left: This one varies in length, too” runs right into “# Item 4 Right: Right” without me changing the font size at all.

I’m using FF 1.0

posted at 01:51 pm on February 16, 2005 by Joseph

22 Font Sizing

The final “example” page does display text overlapping when the text is resized for me too, in Firefox. However, the applied example ( http://www.radiusnetworks.co.nz/computer-services.htm ) works just fine for text resizing. The second to the last example resizes just fine, maybe a CSS rule is missing from the last one or something.

posted at 02:49 pm on February 16, 2005 by Justin Perkins

23 step backwards?

not only are the classes non-semantic, but a simple list was broken in two. why?

a table is just as good as breaking one list into two for the purposes of PRESENATION in the structural layer.

have we gone from reading about improvements in our process and approach to saying that this is a “practical approach to the current environment” or in other words… hacks?

posted at 03:41 pm on February 16, 2005 by jim

24 One list is better but...

We have done this sort of thing for a few clients. Usually we use one list and do what the others have suggested with floating the li’s with 50% of the width of the ul. ( Or dd’s floated in the dl as is most often the case.)

The only problem with the lists are instead of reading down in columns, they read left to right. That is:

1 2
3 4
5 6

not:
1 4
2 5
3 6.

However, that is a small price to pay. Visitors usually catch on to the order- Even if it is a long list in alphabetical order.

With small list like the example, I would argue the order is even less of an issue.

Therefore, I say go with one column not 2! It’s more semantic.

David

posted at 07:34 pm on February 16, 2005 by David Wilbanks

25 One list is better ... but Fix post...

Sorry…. The end of my last post should say “ go with one LIST” not “go with one COLUMN”

david

posted at 07:38 pm on February 16, 2005 by David Wilbanks

26 Here's my approach

Here’s my approach:

http://www.unbf.ca/altiustu/upload/multilayer/

I’ve floated the li instead of ul but gave it a class so you can order it any way you like.

posted at 09:35 pm on February 16, 2005 by Mehmet

27 Thoughts on a thought

I tried out alicia suggestion and it works fine
ol
{ width : 100%;
}

ol li{ width : 50%; float:left;
}

The only downside is that items are drawn so the first is on the left and the second is on the right instead of them being drawn first for the left and then for right, does that make sense?

posted at 09:36 pm on February 16, 2005 by Sam

28 Tables are not the answer.

A table is no better or worse than breaking up the list into two lists. A table has rows and columns, and they have a certain understood relationship. Semantically, I’d much sooner have the content in two lists that marked up with a relationship that isn’t there, i.e. the row/column relationship.

There’s no perfect solution, and the author offers one that works. It has its problems, but so do all attempts at making an imperfect markup language and an imperfect presentation syntax (along with imperfect user agents) work for practical needs.

posted at 09:39 pm on February 16, 2005 by Eric Shepherd

29 Mini css

Apart from the discussion on semantics, if one just goes with the markup proposed in the article, the following CSS should also work just fine in a cross browser kinda way:

#div { width: 800px; } #div * { margin: 0; padding: 0; } #div ul { position: relative; margin: 1em 0; width: 400px; float: left; } #div p { clear: both; } #div li { margin: 0 0 0 2em; }

posted at 12:15 am on February 17, 2005 by Tim Wouters

30 Rikkert Koppes is right

the semantics is gone anyway. It’s surprising to see how many designer just don’t get it.

posted at 02:36 am on February 17, 2005 by Flavio