List styles
List styles are not supported by Omniweb.
You can give quite detailed instructions on the appearance of list items, concerning the
bullets or other markers and their position. Below are some examples.
list-style-type
What should the type of the marker be? There are several interesting possibilities.
If a browser does not support a certain type it defaults to the standard UL bullet, except for
Explorer 5 on Mac, whose default is the standard OL.
Of course a list can consist of <LI>'s, but also of elements that have a
display: list-item declaration.
Default
The default is of course the bullet (for OL's: decimal).
Basic
The basic list types are not supported by Netscape 4.
- First LI: decimal
- Second LI: decimal
- First LI: lower-roman
- Second LI: lower-roman
- First LI: upper-roman
- Second LI: upper-roman
- First LI: lower-alpha
- Second LI: lower-alpha
- First LI: upper-alpha
- Second LI: upper-alpha
Advanced
The advanced list types are fully supported by Mozilla, Opera 7
and Safari.
- First LI: decimal-leading-zero
- Second LI: decimal-leading-zero
- First LI: lower-latin
- Second LI: lower-latin
- First LI: upper-latin
- Second LI: upper-latin
- First LI: lower-greek
- Second LI: lower-greek
list-style-image
Not supported by Netscape 4.
Slightly buggy in Explorer 5 on Mac.
It is also possible to use an image.
- First LI list-style-image: url(../js/pix/logo_nn5.gif)
- Second LI list-style-image: url(../js/pix/logo_nn5.gif)
Explorer 5 on Mac does not respect the line height of the image, so
that the result with large images may look like this:
Konqueror is slightly worse: a margin error may make part of the text
unreadable:
list-style-position
Finally, what position should the list marker have. W3C defined inside and
outside. Outside is the normal behaviour in most browsers, while inside means
that the marker should be an inline element, inside the margin, so that the
text may wrap below it.
Default with UL
Default with display: list-item
First LI
Second LI
outside
Not supported by Netscape 4.
Buggy in Explorer 4: the bullet is inside the border of the LI.
Buggy in iCab: margin-bottom seems to become negative.
With UL
- First LI. We put a lot more text in it so that we get the wrapping effect that will enable us to ascertain the W3C
spec is followed to the tiniest details. After all, an 'inside' list position should take care that the bullet is part
of the wrapping.
- Second LI
With display: list-item
First LI. We put a lot more text in it so that we get the wrapping effect that will enable us to ascertain the W3C
spec is followed to the tiniest details. After all, an 'inside' list position should take care that the bullet is part
of the wrapping.
Second LI
inside
Not supported by Netscape 4.
Buggy in Explorer on Mac: in Explorer 4 the bullet gets a far too large margin-left,
while the combination of display: list-item and list-style-position: inside
makes Explorer 5 give up on rendering the page.
Buggy in iCab: margin-bottom seems to become negative.
With UL
- First LI. We put a lot more text in it so that we get the wrapping effect that will enable us to ascertain the W3C
spec is followed to the tiniest details. After all, an 'inside' list position should take care that the bullet is part
of the wrapping.
- Second LI
With display: list-item (this one is buggy in Explorer
5 on Mac, you won't see the 'Contents' link below it).
First LI. We put a lot more text in it so that we get the wrapping effect that will enable us to ascertain the W3C
spec is followed to the tiniest details. After all, an 'inside' list position should take care that the bullet is part
of the wrapping.
Second LI