lists

how NN and IE handle lists

page 1 of 4

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

preface

Lists are represented with standard HTML code. CSS should allow authors to extend stylesheet control over these common HTML elements. However, I have found that NN and IE handle the style representations of lists very differently.

Generally, we want to be able to control the look of a list that has nested lists inside of it. We should be able to control the look of each level of list, both background coloring and foreground coloring, as well as fonts. Below is a typical list with two nested lists. The nesting is only one level deep.

in IE we see

This is fine, but we want to color behind the list. Let's add the stylesheet definition below.

UL {background:blue;}

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

IE5.0 colored all the way out to the right margin. NN4.7 colored only directly behind the text.NN6.0 colored all the way across the page to the right margin, and also colored in the bullet area.

Let's see if we can bring the representations in each browser into line by using the hack of setting a border one pixel wide (for NN) and by setting the WIDTH of the UL element (for both NN and IE).

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

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

All versions look pretty similar. All versions are blue boxes constrained with a width. NN4.7 is showing the borders around each UL element, but that's alright. We can fix that with BORDER-COLOR. If we set BORDER-COLOR to blue, the border will disappear in NN4.7. In the next section, we will try to control more style elements in the list.