TroyGrosfield.com TroyGrosfield.com

Headline

Custom CSS List Bullets: list-style-image Positioning Workaround

Author
by Troy Grosfield
Date
October 11th, 2010
Category
Developer
Story

Creating custom CSS bullets can add a lot of extra flare to your site and truly give it a unique appeal.  However, sometimes dealing with the list bullet positioning can be a pain.

Example

You want your list to look like this:

using the following css:

ul {
    list-style-image: url('bullet.png');
    margin-left: 1.25em;
}

but instead, you see this:

Notice that the positioning of the bullet is not quite what you would expect.

The Workaround

There are two workarounds for this.

  1. Add padding to your custom bullet image (not recommended)
  2. Use a background image instead

So, instead of setting the list-style-image attribute, try using a background image:

ul li {
   background-image: url('bullet.png');
   background-position: 0 5px;
   background-repeat: no-repeat;
   padding-left: 1.5em;
}

Or, set the entire background using 1 line of CSS:

ul { list-style-type:none; }
ul li { background: url('bullet.png') no-repeat 0 5px; }

This will give you the desired look you were going for and will allow you to position your bullets how you want.  It also gives you more flexibility over custom bullets or other list item images.

Tags
Comments
3 Comments »

3 Comments

Leave a reply

 
  1. Author
    rewfarasfvmsdr
    Date
    October 2nd, 2011 at 1:09 pm
    Comment

    Amazing site…

    I really liked your blog, thanks for sharing this useful information……

  2. Author
    JA
    Date
    June 14th, 2011 at 4:31 pm
    Comment

    You forgot

    ul {
    list-style-type:none;
    }

  3. Author
    claim insurance
    Date
    January 26th, 2011 at 4:39 pm
    Comment

    very use full information. thank you.