CSS LIST-STYLE-IMAGE
This property indicates a graphic to be used for the list markers in the list structure. This should override the default appearance of list-markers in the current HTML list structure. If a ‘list-style-image’ is given a value of ‘none’ or the URL can not be loaded, the ‘list-style-type’ will be used in its place. The ‘list-style-type’ should always be specified in the event the URL pointed to in ‘list-style-image’ can not be loaded
Example
| ul { list-style-image: url(http://www.example.com/pic.gif) }
<ul><li style=”list-style-image: url(http://www.example.com/pic.gif)”>content</li></ul> |
Possible Values
| Value | Description |
|---|---|
| inherit | Explicitly sets the value of this property to that of the parent |
| none | No list-marker will be displayed for the list item |
| [url] | This value indicates the URL source for the list-marker graphic. It can be either an absolute or relative URL. If the graphic can not be loaded, whatever ‘list-style-type’ property is set will be used |
When i use the style-list-image.
The images size is 14px x 14px. Why the list text cannot set the vertical-align: middle?
Seems the list text keep appear at the vertical-align:bottom;
Any ideas?
When i use the style-list-image.
The images size is 14px x 14px.
Why the list text cannot set
the vertical-align: middle?
Seems the list text keep appear
at the vertical-align:bottom;
Have the same problem, its really annoying!
You’ll have to use a background image instead in order to get the same result in all browsers. See second example under “Using an Image as List Item Marker” here: http://www.w3schools.com/CSS/css_list.asp