[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]
Table of topic groupsFront page of CSS-guideGuide pages > 9. How to set CSS for list elements

9. How to set CSS for list elements

Topics

Common

In my mind one of the most cute features in CSS is to use own list images - they are on of my favorite CSS-definitions!

List items

CSS1 examples

Below are some examples, where is CSS1-level list-related properties ([M][S][Pw]):

ul li /* an-ordered list and the first list-marker to it; all properties are inherited to descendant elements, if they are not especially defined */
{list-style-type: disc; /* CSS1 level list style types for unordered lists: disc, circle, square and none; The list item must define, because it might be happen, that the list image is not available */
list-style-image: url(pallo.gif);
list-style-position: outside; /* the default value and cause indent; Value inside means that the next possible row begins at the same level as the list-item */
text-align:justify}
ul li li /* a nested list; This defines the list-item of the next level child's element and all descendant elements inherit properties, if they are not especially defined */
{list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }

ol li /* ordered list - remember also to define sub-lists if you use them! */
{ list-style-type: upper-roman; /* CSS1 level list-markers for ordered lists: decimal, lower-alpha, upper-alpha, lower-roman, upper-roman; decimal is the default value */
list-style-image: url(.gif); /* sometimes might happen, that ordered lists inherit list-images from some matching patterns and to prevent this to be happen, it is necessary to define an-existing list image */
list-style-position: outside;}

You can look at also examples in the following pages:

It is possible to create from lists a table resembling presentations (look a model of an example[S][Pw], which I have already used).

Browser-specific notes:

  1. Netscape 4.x margins should set only for elements OL and UL, not to the LI element.

  2. List images don't work in Netscape 4.x browsers.

  3. In Netscape 4.x browserstext-align:justify doesn't work properly in lists.

  4. Table resembling list presentations don't work in Netscape 4.x browsers. Texts inside lists are readable even if the structure of the presentation is totally incorrect.

  5. If list-style-position:inside starts a block, the list marker should remain in an own row, because it should create an own element box. MS IE and Opera don't follow in this matter the CSS-specifications.

  6. Resetting the list-style-position in sub-lists doesn't work in MS IE 4.0 for Windows.

  1. I have found that MS IE browsers have difficulties, if list elements have much content. At least with frames some MS browsers render unnecessary horizontal scroll bars. If you add round the problematic list element (for example. UL) with the element DIV narrower width value (for example div.narrower {width:97%}), the problem might disappear.

  2. MS IE can't handle properly large and multi-level lists (as an example the Finnish CSS term list[S] - I divided it into sections, but still MS IE does have difficulties with the padding values.

  3. Mozilla Gecko browsers set the default positions of list elements differently as MS IE and Opera. Opera and MS IE use default margin values to create relative offsets between elements, but Mozilla use paddings. In order to avoid problems, if default values are changed, both margin and padding properties must be defined. If only the margin property is changed, this cause different rendering, which can be seen from the test page[S] and the screen captures, which I took:

[Top]

CSS2-C223 new features

Into CSS2 has been added new list style types (for example list-style-type:decimal-leading-zero and list-style-type:lower-greek).

CSS2 brings the possibility to make extra characters and create counters to lists using pseudo-elements (:before, :after) and the content property. I use the content property especially in the printed version of this site.

CSS3 will add some new values (for example radio) to the list-style-type property, because CSS3 will have better support of HTML 4.0 form elements. Also some new content functions will be added.

The purpose of CSS is use not to embed arbitrary string or content into document. The idea of content property is to give the possibility to decorate element by using small images and special characters (for example *). The property makes also possible to show normally hided values of attributes (content:attr()):

blockquote:before {content:"*"; float:left; width:1.0em; height:1.0em} /* * have bee used like a list bullet before the element. */
blockquote:before {content:"*********************"; display:block; text-align:center} /* * has been used like a top border before the element. */
a[target="_blank"]:after {content: " <" attr(href) "> "} /* Addresses of such links, which goes outside of the site have been showed. Around the Web-address has been added some space and characters. */
W3C: CSS2: 12 Generated content, automatic numbering, and lists; 12.6 Markers and lists[Pw].

I don't handle in this page more thoroughly CSS2-C223 special features. I list them in the last page[S]. The next page handles tables.

Browser-specific notes:

  1. Mozilla Gecko browsers support also new CSS2-level list style types.

  2. New pseudo-elements, generated contents and quotes work in Opera 4.x+ and Mozilla Gecko browsers ([M][S][Pw]). Indeed new pseudo-elements don't work in Opera 5.1x-6.x for sub-elements of table. Mozilla Gecko and Opera 7.x+ browsers support content:url(); but only images can be used. The reason is that browser designers want to keep the spririt of CSS - ther purpose of CSS is not to embed artibrary content to the document.

  3. The content property doesn't work in Opera browsers if rules are grouped.

  4. In Opera 4.+ works also automatic numbering. Opera is the best browser to visit in the last model page. Opera has however some bugs in generated content related features, which I mention in the CSS-notes[S]. I have also a test page[S] for them.

[Top]
   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004