CSS - Lists

CSS - Lists

In HTML we have two types of lists:

• ordered lists - numbers, roman numerals o letters
• unordered lists - the good all bullets list (circles, squares, etc).

The CSS list attribute allows you to customize the HTML list style and then use an image for the bullet mark. Here is a practical example that uses list style type:

CSSul { list-style-type:disc; }
ol { list-style-type:upper-roman; }

To use an image as a list element bullet you will have to do the following:

CSSul { list-style-image:url("my_image.png"); }

Note:
Placing an image like this doesn't have same behavior in all browser. For example, Internet Explorer and Opera will show the image slightly upper than Firefox and Chrome.

There is a workaround for this and that is to use the image as background:

• Use an image as background and set it as no repeat.
• Set a small margin from the left and upper side.
• Reset your list for not using any marker and set the margin and padding to 0, just to be cross-browser safe.

CSSul {
  list-style-type:none;
  padding:0px;
  margin:0px;
}
li {
  background-image:url(image.png);
  background-repeat:no-repeat;
  background-position:0px 5px; 
  padding-left:15px; 
}

CSS - List alignment

CSSul.inside { list-style-position:inside }
ul.outside { list-style-position:outside }

The default value for aligning a list is outside. The inside value will push the list to the right.

CSSlist-style:none inside url(arrow.gif);

CSS - List short-hand

The order is as follows list-style: list-style-type list-style-position list-style-image

Just maintain the above order and you should be fine.