lists

how NN and IE handle lists

page 3 of 4

page 1
• preface
page 2
• coloring behind levels
• changing the list type
page 3
• rethinking lists
page 4
• font sizes

rethinking lists

It seems that there is little room for a workaround for NN4.7 and lists. In fact, both IE5.0 and NN4.7 are a little buggy and downright non-compliant in the area of lists. One can use stylesheets to control lists as long as too much control is not needed. Specifically, forget about controlling fonts. Coloring backgrounds isn't so bad.

I have been using unordered lists. The lists are small. What code lurks behind the list is unimportant to the reader, so maybe we don't have to create nested lists by nesting the UL tag at all. Maybe we could use a collection of small unordered lists for each part of the master list and handle the font, coloring and positioning of each list to mimic nesting. Look at the code below for what I mean.

<ul>
<li>list item two
<li>list item three
</ul>
    <ul>
    <li>sublist item one
    <li>sublist item two
    <li>sublist item three
    </ul>
<ul>
<li>list item four
<li>list item five
</ul>
    <ul>
   <li>sublist item four
   <li>sublist item five
   </ul>
<ul>
<li>list item six
<li>list item seven
</ul>


we see in IE5.0:

Here are multiple, independent unordered lists. We can make them appear to be part of one big list by using DIVs. Let's wrap each list in a DIV. We'll use two classes, one to represent the outer, main list elements, and one to represent the nested list elements.

.outer {background:blue;width:60%;border-width:1px;
	font-weight:bold;}

.inner {position:relative;background:white;color:red;
	left:5%;width:70%;border-width:1px;
	font-weight:normal;}

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:	.

Let's wrap the entire set of lists in one DIV which sets the background to red. By making a wrapping DIV, we should be able to set an area onto which we can place our list. The result is below.

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:	.

Although NN4.7 falls down on this job, the use of the individual lists wrapped by DIVs will work out well. We now have full control each section of page that defines the list.