HTML and CSS Reference
In-Depth Information
list-style-image
Initial value:
none
| Inherited: Yes | Applies to: Elements with
display: list-item
| CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
If none of the
list-style-type
markers takes your fancy, you can use your own image as a marker using the
list-style-image
property and declaring a
url()
function as its value:
1.
In the
.benefits ul
rule set, add this new declaration:
list-style-image: url(“../images/check.png”);
2.
Save styles.css.
Although a marker image takes the place of a basic marker determined by the
list-style-type
, it's wise to
specify a
list-style-type
along with a
list-style-image
just in case the browser can't get the image.
list-style-position
Initial value:
outside
| Inherited: Yes | Applies to: Elements with
display: list-item
| CSS2.1
Browser support: IE 4+, Chrome 1+, Opera 3.5+, Safari 1+
As shown in Figure 11-11, the list of benefits now uses images in place of the browser-rendered markers. Note that
the markers sit outside the principal block of content.
outside
is the initial value for
list-style-position
,
a property that changes the position of list markers.
Figure 11-11
The “Why Choose Cool Shoes & Socks” list now with images used for the markers.
1.
In the
.benefits ul
rule set, add the following declaration:
list-style-position: inside;
2.
Save styles.css.
As you can see in Figure 11-12, by declaring a
list-style-position
of
inside
, you can position list mark-
ers inside the principal block.
