This is a web developer insider trick.
As most people know, when you add the property list-image to style a list you have almost no control over where the image lands.
This is particularly ugly when comparing different browsers or when your image sits to high, low or almost on the text of your list.
I’m going to show you how to style a list item with a tick and keep full control over where the image lands.
First thing is to through out the list-style-image property as it is useless.
Use a normal background property.
|
1 2 3 4 5 6 |
ul.tick li { list-style: none; background: url('images/tick.png') no-repeat 0 1px; padding: 0 0 0 24px; line-height: 1.4em; } |
Doing this you can not only use the background positioning values but also the padding property.
For this tick I am pushing it down 1px with the top position property and adjusting the distance between the text and the icon with 24px of left padding.
Using these properties for list style images instead of the actual list-style property gives you full control.
- Something
- Something
- Something
- Something
- Something
- Something
- Something
- Something
- Something
- Something
- Something
- Something