|
What are the different types of list item markers?
Author: Deron Eriksson
Description: This CSS tutorial shows the different types of list item markers.
Tutorial created using:
Windows XP
The 'list-style-type' property can be used to specify the type of marker to use for list items. Its value defaults to 'disc'. The 'list-style-type' value will be used if 'list-style-image' is 'none' or if the image that 'list-style-image' points to can't be displayed. The 'list-style-image' property can be a uri, none, or inherit. Its value defaults to 'none'. The 'list-style-image' property allows an image to be used for a list item marker. The CSSW 2 specification defines the values of 'list-style-type' to be: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana- iroha | katakana-iroha | none | inherit The CSS 2.1 specification defines the values of 'list-style-type' to be: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit Since CSS 2.1 is the more recent specification, let's look at examples of its list-style-type values. In addition, let's look at an example of how list-style-image can be used to specify an image for a list item marker. We can see these examples in style-test.html: style-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li style="list-style-type: disc">disc</li>
<li style="list-style-type: circle">circle</li>
<li style="list-style-type: square">square</li>
<li style="list-style-type: decimal">decimal</li>
<li style="list-style-type: decimal-leading-zero">decimal-leading-zero</li>
<li style="list-style-type: lower-roman">lower-roman</li>
<li style="list-style-type: upper-roman">upper-roman</li>
<li style="list-style-type: lower-greek">lower-greek</li>
<li style="list-style-type: lower-latin">lower-latin</li>
<li style="list-style-type: upper-latin">upper-latin</li>
<li style="list-style-type: armenian">armenian</li>
<li style="list-style-type: georgian">georgian</li>
<li style="list-style-type: lower-alpha">lower-alpha</li>
<li style="list-style-type: upper-alpha">upper-alpha</li>
<li style="list-style-type: none">none</li>
<li style="list-style-type: inherit">inherit</li>
<li style="list-style-image: url('eyes.gif')">list-style-image: url('eyes.gif')</li>
</ul>
</body>
</html>
We can see style-test.html displayed in IE7 and Firefox in the screen capture below. Notice that list-style-type values of disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none work in both IE7 and Firefox. Notice that list-style-type values of decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, and georgian work in Firefox but not IE7. We can also see that specifying a list-style-image value works in both Firefox and IE7. 
Related Tutorials: |