I am creating custom bullets and trying to get the spacing to work correctly for me. But what happends is when the bullet text wraps to the next line it does not indent to the first letter but actually indents directly under the bullet/image. Is there a way to prevent this with CSS?
This is what I have so far:
li {
padding-left:1px;
list-style-image: url(../../images/gui/bullets/list_dot.gif);
vertical-align: middle;
padding-top: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
list-style-position: outside;The css you have given would not cause that effect. Can you give the full document?wait I think i found it..
list-style-position: outside;
The list-item properties (list-style-position) are inside (usually by default I think), outside, and inherit.
list-style-position : outside (and then move it around a few pixels if necessary) is (imho) the best-looking choice if you're going to use an image instead of a standard type (disc, circle, square, decimel, lower-roman, upper-roman, lower-alpha, upper-alpha, none (or course), or inherit
This is what I have so far:
li {
padding-left:1px;
list-style-image: url(../../images/gui/bullets/list_dot.gif);
vertical-align: middle;
padding-top: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
list-style-position: outside;The css you have given would not cause that effect. Can you give the full document?wait I think i found it..
list-style-position: outside;
The list-item properties (list-style-position) are inside (usually by default I think), outside, and inherit.
list-style-position : outside (and then move it around a few pixels if necessary) is (imho) the best-looking choice if you're going to use an image instead of a standard type (disc, circle, square, decimel, lower-roman, upper-roman, lower-alpha, upper-alpha, none (or course), or inherit