|
Internet Explorer's support of CSS with relation to lists is only fully supported for browsers on the Windows platform.
In any case, be careful about using CSS for lists since it might not show the way you want it to on all browsers. However, most things won't ruin anything if the browser doesn't support it - it just shows as a normal list - so it will be okay to define lists that only work for the most widely used browser.
LIST PROPERTIES
Property |
Values |
NS |
IE |
| list-style type |
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none |
4+
4+
4+
4+
4+
4+
4+
4+
|
4W
4W
4W
4W
4W
4W
4W
4W
4W |
list-style image
|
none
url(<url>) |
|
4W
4W |
list-style position
|
outside
inside |
|
4W
4W |
list-style
|
<list-style type>
<list style position>
<list-style image> |
|
4W
4W
4w
|
4 +: Browser version 4 or newer.
4W: Browser version 4 or newer, windows only.
DEFINING STYLES FOR LINKS
As mentioned in the above table, we have four unique selectors with respect to lists. The fourth selector, list-style is an overall selector that let you define all list related styles at once.
The three basic selectors are:
list-style type
Defines the look of the bullets used in your list.
list-style image
Let's you use a custom graphic for bullets.
list-style position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet is to the left of both lines.
list-style position:inner lets the second line align with the bullet. |
Assigning several properties at once
Instead of using different selectors for each list-style you can specify them all at once using the list-style property.
For example:
<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: square inside; color:blue}
.blacktext {color:black}
</style>
</head>
<body>
<ul>
<li class="list1"><span class="blacktext">This is one black line</span>
<li class="list1">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
<br>
<br>
<ul>
<li class="list2"><span class="blacktext">This is one black line</span>
<li class="list2">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the list.
</ul>
</body>
</html> |
|
