>> > I am using <li> with a • in the bengining of each
>> > line of text. How can I make sure if the line is too
>> > long, after the line wrap the second line stays behind
>> > the bullet, not under the bullet?
>> Give the <li> a left-padding of the desired width, and then
>> negative indent of the same width.
>> This assumes you know the exact width of the • plus space
>> Why not make the • an image and apply it in CSS by
>> list-style-image:url(bullet.jpg); ?
> Because list-style-image doesn't work properly cross-browser.
> Background image and padding does though:
For the most part I agree with using background image for control but if
you have any floated block to the left of the list, list-style image is
going to give you the best result.( or in this case the •)
If you really want to use • then put that in the li, set
list-style-position to inside, and put a negative text indent on the li.
use the margin and padding of the ul to get the correct spacing from other
For more info look up taming lists at A List Apart.
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/