1 reply [Last post]
Anonymous's picture

How do I get a list to lay out as if it were a table, using CSS? It is okay if older browsers display it as a list, but not for older browsers to crash.

An example can be found at:

The above validate at w3.org. The code degrades gracefully in Netscape 4.

The problem:

- It sort of works in IE 5 Mac, IE 5 and 6 Win, and Mozilla 1.3, but not neatly enough for me to be willing to drop using a table for layout.

Stuff I consider deal-killers (that is, I'll stick with table layout if
I can't solve these):

- At some screen widths (for example, 800 x 600 maximized in Mozilla 1.3 Win at default font size), the text "End of list", which belongs below the list, appears to the right of the list.

- At some screen widths (same example), links which wrap to the next pseudo-table-row don't align all the way to the left, messing up the grid arrangement.

Stuff I could live with (but would prefer not to have to):

- Big margins to the left and right of the table.

- If fixing the must-haves make it not work in IE 5.5 Win or IE 5.0
Win. (As long as it degrades gracefully, I'm happy.)

The requirements to consider this a solution:

- The only style marking in the HTML can be the class on the <ul> and <li> tags (and of course the link to the style sheet). This is because:

(1) There will be other lists on the page; I will only want to do this effect with some of the lists and not others.

(2) the page will be maintained by a non-technical person using
Contribute, and I don't want them to have to remember to put a style on the following <p> tag.

(3) the page will be maintained by a non-technical person using
Contribute, and if the <ul> and <li> tags have a "style" (as opposed to an "id") attribute, it will be easy for that person to turn the style off, edit the list, and turn the style back on again (I hope).

Things to be aware of:

- I intentionally choose a low max-width value to force the problems to render. I expect the solution will require more than playing with the max-width value in order to be a generic solution and not just applicable to these specific links.

- The links don't go anywhere at the moment.

- I consider it a good thing that the list style will vary the number of columns in the list based on the screen width.

Is there any hope for my getting rid of tables in this instance?

dJomp's picture
Last seen: 6 years 17 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Rendering list as table?

My humble opinion: Don't bother. Stick with tables.

Tables do have a place in HTML - there are some examples that definately should / should not be done with tables, yours I feel is somewhere in the grey area in the middle.

Given the reqirements, and the cross-browser compliance, it seems worth keeping tables here.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.