lists

how NN and IE handle lists

page 2 of 4

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

coloring behind levels

In the previous section, we found that we were able to color behind a list that had nested lists one level deep. What I really want to do is color that nested level differently from the main list for emphaisis. But first, let's see if we can control other style information for the list. Below is the style definition for the UL element. I've added the font information.

UL {background:blue;width:55%;
border-width:1px;font-weight:bold;}

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

In NN6.0, we get open cicle bullets for the inner list elements. But, we do get consistant formatting; all text is bold and each list and sublist takes on the assigned style.

NN4.7 has lost the style formatting for the outer UL after rendering for the inner UL. I tried to correct this by setting the stylesheet definitions for the LI element, but that had no effect. I tried replacing WIDTH with the MARGIN-LEFT and RIGHT properties, but that failed to clear up the problem as well. Next I tried creating a new style for the inner UL. IE took this set of definitions well and displayed all text as bold. NN4.7 just failed to perform properly.

The next possible solution to investigate involves DIVs. Let's try to wrap the UL list in a DIV. Below are the two DIV classes I've created, one for the outer UL and one for the inner UL tag. I've made the style in the two classes different enough so that the inner and outer list elements will be very distinct. I've used my standard hack of setting a one pixel border around the DIV so that NN4.7 will box in the background color. I've also set the POSITION property of the .inner class so that I can move the inner UL element over to the right. I also got rid of the UL style definition.

.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:	.

More failure. NN4.7 has failed to render the later parts of the outer list in the same way it did the earlier parts of the list. It is probably a bit hard to see in this graphic, but the latter outer UL lists elements are not bold as they should be. It seems that the bug comes into play when the inner list is rendered. I tried replacing the relative positioning with the default static position and even substituted margins for width, but each time I had the same problem with NN4.7

NN6.0 has done a good job, and again gave us the open cicles on the inner list

changing the list type

At this point, I tried changing from an unordered list to an ordered list. This didn't help.