Wickham's XHTML & CSS tutorial

Lists

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

The new HTML/XHTML code expressions have changed from the old HTML. For instance, the old html coding was expressed as type="circle" but this method does not validate with XHTML and CSS. The new method is to use a style as in style="list-style-type: circle".

HTML allowed end tags for li tags to be omitted but in XHTML these must be closed.

Unordered lists

1 green icon An unordered list just lists the items in a column with a bullet point maker; either a disc, circle or square.

Item 1: type is disc
Item 2
Item 3

Item 1 type is circle
Item 2
Item 3

Item 1: type is square
Item 2
Item 3

Item 1: style="list-style-type: none;" in ul tag
Item 2
Item 3

The code for the circle example is:-
<ul style="list-style-type: circle">
<li>Item 1: type is circle</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

The code "list-style-type:..." does not need to be stated for the disc type because it is the default. The li end tag must be closed in XHTML.

Ordered lists

2 green icon Ordered lists have a number or letter to denote order of the items and these can be of several types:-
decimal, lower-roman, upper-roman, lower-alpha, upper-alpha.

Item 1: ordered list, type is upper-alpha
Item 2
Item 3

The code is:-
<ol style="list-style-type: upper-alpha">
<li>Item 1: ordered list, type is upper-alpha</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Nested lists

3 gold icon Lists can be nested to create several levels. In the following example both types have been used.

... Level one, number one... Unordered nested list
1. ... Level two, number one...Ordered list
2. ... Level two, number two...
  1. ... Level three, number one...instructed to start at 10...Ordered list
  2. ... Level three, number two...
3. ... Level two, number three...
... Level one, number two...
... Level one, number three...

The code is:-
<ul>
<li>... Level one, number one... Unordered nested list
  <ol style="list-style-type: lower-roman">
   <li> ... Level two, number one...Ordered list</li>
   <li> ... Level two, number two...
    <ol start="10">
     <li> ... Level three, number one...instructed to start at 10...Ordered list</li>
     <li> ... Level three, number two...</li>
    </ol>
   </li> <--end of Level two, number two li-->
   <li> ... Level two, number three...</li>
  </ol>
</li> <--end of Level one, number one li-->
<li> ... Level one, number two...</li>
<li> ... Level one, number three...</li>
</ul>

The start value for continuing a list after a break, possibly caused by text paragraphs in between two sections of a list, is inherited from HTML; it works in HTML/XHTML in Firefox and IE but does not validate in HTML/XHTML Strict but does validate with the Doctype for HTML/XHTML Transitional. See blooberry.com. The Doctype HTML 4.01 Transitional has been used for this page which does not show an error for start="10".

w3schools says The "compact", "start" and "type" attributes of the ol element were deprecated in HTML 4.01.
The "compact", "start" and "type" attributes of the ol element are not supported in XHTML 1.0 Strict DTD.

It seems that a start number is not supported in XHTML Strict and may not work in all browsers so it may be best to avoid using this feature. Use an unordered list and manually type in the number. See also paragraph 11.6 Issues on W3C.

Images for markers

4 green icon It is possible to use images for the markers instead of the disc, circle or square.

Item 1: list-style-image code
Item 2
Item 3

The code is:-
<ul style="list-style-image: url(images/arrowbullet.png);">
<li>Item 1: list-style-image code</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

I have put the list-style-image style in the ul tags in my page because there are other marker styles on the same page but you should make it a class in the stylesheet or head style section if possible.
The style should be for the ul tag but can be for a class on the li tag if you want one type of li to be different.

Bullet markers or labels outside or inside text

5 gold icon green icon The position of the bullet points or labels can be set to the left of the list text or set as the first character of the first text line using list-style-position: outside or inside. I have put background-colors to the div and ul tags so that you can see what is happening to the positions. Look at the difference between IE compared to Firefox, Opera or Safari for Windows. IE8 and above display like Firefox.

In the left column div there are normal ul tags; the top li tag is normal (with a default list-style-position: outside;) while the lower li tag has list-style-position: inside. In both examples you can see how the ul tag in IE7 has a default left margin inside the div. In Firefox, Opera and Safari for Windows and IE8 and above the left column has no default left margin but the bullets are outside the div in the top example.

In the right column div both ul tags have a margin-left to correct IE7's default margin; the top one has margin-left: 20px while the bottom one has margin-left: 0. The li tags are the same as in the left column; the top li tag is normal while the lower li tag has list-style-position: inside. In both examples you can see how the ul tag in IE7 has been brought left to the side of the containing div with a margin-left. Although the margin-left is to correct IE7 and isn't needed for the lower example in Firefox, Opera and Safari, it corrects them in the top example by bringing the bullets or labels inside the div.

Default situation
IE7 different from Firefox
list-style-position: outside; (or not stated)

A long line here which extends to the 200px width and then drops down to the next line. The bullets are outside the text.
Next list item

list-style-position: inside;

A long line here which extends to the 200px width and then drops down to the next line The bullets are inside the text.
Next list item

Corrected situation
IE7 same as Firefox
list-style-position: outside; (or not stated)

A long line here which extends to the 200px width and then drops down to the next line. The bullets are outside the text.
Next list item

list-style-position: inside;

A long line here which extends to the 200px width and then drops down to the next line The bullets are inside the text.
Next list item

The lists are in containing divs 200px wide. The code for the left column is:-

<div style="width: 200px; float: left; background-color: #c7c7c0; border: 0;">
<ul class="background">
<li>A long line here which extends to the 200px width and then drops down to the next line. The bullets are outside the text.</li>
<li>Next list item</li>
</ul>

<ul class="background">
<li class="listposition">A long line here which extends to the 200px width and then drops down to the next line The bullets are inside the text.</li>
<li class="listposition">Next list item</li>
</ul>
</div>

The lists are in containing divs 200px wide. The code for the right column is:-

<div style="width: 200px; float: left; background-color: #c7c7c0; border: 0; margin-left: 20px;">
<ul class="background" style="margin-left: 20px;">
<li>A long line here which extends to the 200px width and then drops down to the next line. The bullets are outside the text.</li>
<li>Next list item</li>
</ul>

<ul class="background" style="margin-left: 0px;">
<li class="listposition">A long line here which extends to the 200px width and then drops down to the next line The bullets are inside the text.</li>
<li class="listposition">Next list item</li>
</ul>
</div>

The codes for the listposition class and ul tag background class are:-

.listposition { list-style-position: inside; }
.background { background-color: #e9e9e2; }

There is also an attribute list-style-position: outside; which can be used but as it is the default I haven't used it in the first example above.

Lists generally

Check carefully the closing tags of li, ul and ol. Start by closing the innermost lowest level of tags and work your way out by closing each tag until you close the first opening tag last.

Unordered lists can be used for menu bars by nesting several levels. For vertical menubars a series of ul tags with their internal li tags are used. The li tags still show vertically but are set to the right of the heading with position: absolute. For horizontal menubars the ul tags need float: left so that the headings are in a horizontal line but the lists are vertical. See Dropdown menus and also look at the dropdown menus sections of the stylesheet.

See w3.org's HTML Lists here and see w3.org's XHTML List Module here.

Definition lists

6 green icon Definition lists are a special type of list. The codes use essentially the same format as for unordered lists, but use different tags.

The reason for a special type of list is that the description inside <dd> tags are intended to describe the term inside <dt> tags. This means that computers like search engines can analyse the list into separate terms and descriptions.

Football (excluding USA)
Soccer (USA): A field game played with a round ball using feet and head but without using hands (except for the goalkeeper)
Football (USA)
Rugby Football (all countries but different rules to USA Football): A field game played with an oval ball (originally a pig's bladder) using feet and hands
Squash: A racket game played with a small semi-soft ball inside a walled court; A type of vegetable

The codes are:-

<dl>
<dt>Football (excluding USA)</dt>
<dt>Soccer (USA)</dt>
<dd>A field game played with a round ball using feet and head but without using hands (except for the goalkeeper)</dd>
<dt>Football (USA)</dt>
<dt>Rugby Football (all countries but different rules to USA Football)</dt>
<dd>A field game played with an oval ball (originally a pig's bladder) using feet and hands</dd>
<dt>Squash</dt>
<dd>A racket game played with a small semi-soft ball inside a walled court</dd>
<dd>A type of vegetable</dd>
</dl>

There can be more than one term for a description, or more than one description for a term. This is useful when defining a few words which share a common meaning or one word which has several meanings.
The description is indented by default but this can be changed by applying a margin to the tag.

Notes

View/Source or View/Page Source in browser menu to see all xhtml code.

The stylesheet for this site which you will probably need to look at is here.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that they centralise at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

top | prev | next